制作div位置：仅在滚动到之后固定

Question

我有一个div，它是视口高度的100％作为页面的着陆图像，用户滚动后有一个导航div，一旦div滚动到我希望它的位置被固定到顶部从那一点开始的页面。

<div class="landing-panel" id="introduction">
    <h1>Site Title</h1>
</div>

    <div class="navigation">
        <ul>
            <li>NavItem1</li>
            <li>Navitem2</li>
        </ul>   
    </div>


div.landing-panel{/* Unique landing panel */    
    height:100vh;
    background-image: url('../img/landing-panel-background.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center; 
}

div.navigation{
    height:10vh;
    background-color: orange;
    z-index: 999;
    position: fixed;
    top:100vh;
    width:100%;
}

Answer 1

我认为您需要使用jQuery。您首先要检测到有一个滚动，然后将正确的类附加到要保持修复的div。

修改

添加了var sticky = "sticky"，明确定义了该类的名称。

var hdr = 150;
var sticky = "sticky";
$(window).scroll(function() {
  if( $(window).scrollTop() > hdr ) {
    $(".your-div").addClass(sticky);
  } else {
    $(".your-div").removeClass(sticky);
  }
});

其中.sticky是一个具有您想要的任何CSS属性的类。