jquery - 固定导航栏在顶部

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 is a jQuery plugin that gives you the ability to make any element on your page always stay visible.