Question

我正在建立一个网站上使用两个菜单。第二个菜单是一个类别菜单，当用户向下滚动页面以查看内容时，我需要将其粘贴到页面顶部。我以前工作过，但不得不从我的标题中删除一些元素。无论出于何种原因，它现在都行不通。代码要遵循。

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

EDIT2

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

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

Answer 1

任何有兴趣在滚动条上制作粘性导航的人：

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

当页面向下滚动时，使导航菜单变得粘稠

1 个答案: