固定导航栏位于

Question

我想在滚动后将导航栏固定到顶部。我想在滚动登录页面后修复导航栏。是否可以在滚动中检测类，然后在第一类之后将其修复。

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>

Answer 1

如果你不介意使用插件，这是你的解决方案。

Sticky JS

  

Sticky是一个jQuery插件，可以让你有能力   使页面上的任何元素始终保持可见。