スティッキーサブナビゲーションが停止するのを防ぐために

Question

私はメインの固定ナビゲーションを持っていますが、後でそのページで取り上げられるサブナビもあります。

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

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