jquery - 滚动过去后坚持导航

Question

现在，我可以在 div 向下滚动 600px 后将其粘贴到顶部，但我想知道是否有另一种方法可以实现此目的。最好是，一旦它通过导航栏本身，它就会粘住。

var mn = $(".secondary-nav");
    mns = "secondary-nav-scrolled";

$(window).scroll(function() {
  if( $(this).scrollTop() > 600 ) {
    mn.addClass(mns);
  } else {
    mn.removeClass(mns);
  }
});

HTML

<div id="nav" class="secondary-nav one-full column">
    <ul>
      <li><a data-scroll href="#retail">Retail</a></li>
      <li><a data-scroll href="#foodservices">Food Services</a></li>
    </ul>
  </div>

CSS

.secondary-nav {
  z-index: 1000;
}

.secondary-nav-scrolled {
  position: fixed;
  width: 100%;
  top: 0;
}

Answer 1

你也可以使用这个:

$(document).scroll(function(event) {
    var nav = $('#nav').offset().top;

    if( nav >= 600 ) {
        $('#nav').addClass('fixed');
    }else {
        $('#nav').removeClass('fixed');
    }
});