javascript - 使导航菜单在页面向下滚动时变得发粘

我正在构建的网站上正在使用两个菜单。第二个菜单是类别菜单，当用户向下滚动页面以查看内容时，我需要使其停留在页面顶部。我以前可以使用它，但是必须从标头中删除一些元素。无论出于何种原因，它现在都无法使用。遵循的代码。

<script type="text/javascript">
function sticky_relocate() {
  var window_top = jQuery(window).scrollTop();
  var div_top = jQuery('#scroller-anchor').offset().top;
  if (window_top > div_top)
    jQuery('#navbar').addClass('sticky')
  else
    jQuery('#navbar').removeClass('sticky');
  }
 jQuery(function() {
  jQuery(window).scroll(sticky_relocate);
  sticky_relocate();
  });</script>

菜单结构看起来像这样...

<div id="scroller-anchor"></div>
<div id="navbar" class="navbar">
<nav id="site-navigation" class="navigation main-navigation" role="navigation">
    <h3 class="menu-toggle">Menu</h3>
        <a class="screen-reader-text skip-link" href="#content" title="Skip to content">Skip to content</a>
    <div class="menu-category-menu-container">
        <ul id="menu-category-menu" class="nav-menu">
            <li id="menu-item-1408" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1408">
                <a href="http://108.165.22.98/~forgetel/?cat=12">All</a>
            </li>
            <li id="menu-item-1414" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1414">
                <a href="http://108.165.22.98/~forgetel/?cat=5">Videos</a>
            </li>
            <li id="menu-item-1409" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1409">
                <a href="http://108.165.22.98/~forgetel/?cat=6">Entertainment</a>
            </li>
            <li id="menu-item-1412" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1412">
                <a href="http://108.165.22.98/~forgetel/?cat=8">Politics</a>
            </li>
            <li id="menu-item-1413" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1413">
                <a href="http://108.165.22.98/~forgetel/?cat=9">Sports</a>
            </li>
            <li id="menu-item-1410" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1410">
                <a href="http://108.165.22.98/~forgetel/?cat=10">Fashion</a>
            </li>
        </ul>
    </div>
</nav><!-- #site-navigation -->
</div>

救命？

编辑

忘记包括粘性课中的内容。

.sticky {
position: fixed;
top: 0;
}

编辑2

尝试了以下修复，但仍无济于事。

<script type="text/javascript">
var position_to_make_nav_sticky = jQuery('#scroller-anchor').offset().top; //get the Y-position of section
jQuery(window).on({ scroll:function(){ // fires when user scrolls
var current_position = window.pageYOffset; // get the current window Y-Position
if( current_position > position_to_make_nav_sticky )
 { jQuery('#navbar').addClass('sticky'); // add class to make the nav sticky using css
 } else { jQuery('#navbar').removeClass('sticky'); // remove sticky css class } });
</script>

最佳答案

对于对滚动制作粘性导航感兴趣的任何人：

<script type="text/javascript">
    var position_to_make_nav_sticky = jQuery('#scroller-anchor').offset().top; //get the Y-position of section

    jQuery(window).on({
        scroll:function(){ // fires when user scrolls
            var current_position = window.pageYOffset; // get the current window Y-Position
            if( current_position > position_to_make_nav_sticky ) {
                jQuery('#navbar').addClass('sticky'); // add class to make the nav sticky using css
            } else {
                jQuery('#navbar').removeClass('sticky'); // remove sticky css class
            }
        }
    });