阻止粘性子导航跳到位

Question

我有一个主固定导航，但我也有一个子导航，稍后会在页面中拾取。

当您滚动经过 #secondary-nav div 时，它会添加一个 class of .sticky，将 position:fixed 添加到 div。但是，它会在您已经滚动通过它然后跳到主导航下的位置后执行此操作。我怎样才能把它弄平，让它看起来像是在你滚动过去时顺利添加，然后在你向上滚动时又放回去？

Here is my fiddle.

HTML:

<nav id="top-wrapper">I'm a sitcky navigation</nav>
<div id="hero">
hero image!
</div>
<nav id="secondary-nav">
 I'm the secondary nav.
</nav>
<div id="content">
I'm the content, scroll down!
</div>

jQuery:

$(window).scroll(function () {
  if ($(document).scrollTop() === 0) {
    $('#top-wrapper').removeClass('sticky ');
  } else {
    $('#top-wrapper').addClass('sticky ');
  }
});

$(document).ready(function () {
    $(function () {
      var nav = $('#secondary-nav');
      if (nav.length) {
          var stickyNavTop = nav.offset().top;
          $(window).scroll(function () {
              if ($(window).scrollTop() > stickyNavTop) {
                  $('#secondary-nav').addClass('sticky');
              } else {
                  $('#secondary-nav').removeClass('sticky');
              }
          });
      }
    });
});

Answer 1

我尝试在 jquery 代码的顶部偏移量中添加 - 100。检查此 fiddle。 https://jsfiddle.net/fgfb9cpq/1/。并更新辅助导航中的 top。

$(document).ready(function () {
    $(function () {
      var nav = $('#secondary-nav');
      if (nav.length) {
          var stickyNavTop = nav.offset().top - 100;
          $(window).scroll(function () {
              if ($(window).scrollTop() > stickyNavTop) {
                  $('#secondary-nav').addClass('sticky');
              } else {
                  $('#secondary-nav').removeClass('sticky');
              }
          });
      }
    });
});

阻止粘性子导航跳到位

Stop sticky sub navigation from jumping into place

jquery

html

css

sticky