2016-12-07 152 views
1

我想在滚动后将导航栏修正为顶部。我想要在着陆页滚动后修复导航栏。是否有可能在滚动中检测出课程,然后在课程之后进行修正。顶部的固定导航栏

https://codepen.io/shahil/pen/VmXmpE

$(window).scroll(function(){ 
 
    var sticky = $('nav'), 
 
     scroll = $(window).scrollTop(); 
 

 
    if (scroll >= 100) sticky.addClass('fixed'); 
 
    else sticky.removeClass('fixed'); 
 
});
html,body { height:100%; } 
 
.one,.two,.three { min-height:100%; } 
 

 
nav { background:green; } 
 

 
.fixed { 
 
    background:red; 
 
    position: fixed; 
 
    top:0; left:0; 
 
    width: 100%; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="one"> 
 
    <nav> 
 
    NAVBAR 
 
    </nav> 
 
    1 
 

 
</div> 
 
<div class="two"> 
 
    2 
 
</div> 
 
<div class="three"> 
 
    3 
 
</div>

回答

1

如果您使用该插件不介意,这里是您的解决方案。

Sticky JS

粘性是一个jQuery插件,让你的能力,以 让你的页面上的任何元素始终保持可见。

相关问题