阻止粘性子导航跳到位答案

【问题标题】：Stop sticky sub navigation from jumping into place阻止粘性子导航跳到位
【发布时间】：2016-10-31 17:31:08
【问题描述】：

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

当您滚动经过#secondary-nav div 时，它会添加一个.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');
              }
          });
      }
    });
});

【问题讨论】：

查看更新的小提琴它应该没问题jsfiddle.net/fgfb9cpq/3

标签： jquery html css sticky

【解决方案1】：

我尝试在 jquery 代码的顶部偏移量中添加 - 100。检查这个小提琴。 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');
              }
          });
      }
    });
});

【讨论】：