jquery - 制作一个div位置:fixed only after it is scrolled to

Question

我有一个占视口(viewport)高度 100% 的 div 作为页面的着陆图像，在用户滚动后有一个导航 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 属性的类。