Question

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

当您滚过TextBlock div时，它会向div添加#secondary-nav类.sticky。但是，它已经滚动后通过它然后跳转到主导航下的位置。我怎样才能使它平滑，所以当你滚过它时它看起来像是顺利添加，如果你向上滚动它又会再放回去？

Here is my fiddle。

HTML：

position:fixed

jQuery的：

<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>

Answer 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');
              }
          });
      }
    });
});

阻止粘性子导航跳入到位

1 个答案: