有时固定导航菜单

我们目前在我们的网站上有这个侧面导航菜单，它工作得很好。有时固定导航菜单

它有一个somtimes固定侧导航菜单。我的意思是，导航菜单将随用户一起滚动，但在页面顶部碰到顶部导航菜单下方的页面顶部时，将保持固定在页面顶部。

我的问题是，我们的菜单变得非常大，我想知道如何检测菜单是否已经打到网站的页脚区域，并且是否更改为固定并保持在页脚之上链接，现在它最终涵盖了内容。

有没有什么简单的方法可以做到这一点？下面

是我的代码

<div id="productListNavigation-placeholder"> 
    <div id="productListNavigation"> 
    <ul class="categories" > 
     <li ><a title=" - NEW ARRIVALS" id="new-arrivals" href="new-arrivals" >NEW ARRIVALS</a> </li> 
     <li class="current_item" ><a title=" - JEWELS" id="jewels" href="jewels" class="current" >JEWELS<span class="category_arrow"></span></a> 
     <ul class="categories_level_1" > 
      <li ><a title=" -NECKLACES" id="jewels-necklaces" href="jewels-necklaces" >NECKLACES</a> </li> 
      <li ><a title=" - EARRINGS" id="jewels-earrings" href="jewels-earrings" >EARRINGS</a> </li> 
      <li ><a title=" - RINGS" id="jewels-rings" href="jewels-rings" >RINGS</a> </li> 
      <li ><a title=" - BANGLES" id="jewels-bangles" href="jewels-bangles" >BANGLES</a> </li> 
     </ul> 
     </li> 
     <li ><a title=" - FINE" id="fine-jewelry" href="fine-jewelry" >FINE JEWELRY</a> 
     <ul class="categories_level_1" > 
      <li ><a title=" - PERSONAL" id="-personal" href="-personal" > PERSONAL</a> </li> 
      <li ><a title=" - FINE NECKLACES" id="fine-necklaces" href="fine-necklaces" >NECKLACES</a> </li> 
      <li ><a title=" - FINE BANGLES" id="fine-bangles" href="fine-bangles" >BANGLES</a> </li> 
     </ul> 
     </li> 
     <li ><a title="ZODIAC" id="zodiac" href="zodiac" >ZODIAC</a> 
     <ul class="categories_level_1" > 
      <li ><a title="NECKLACES" id="z-necklaces" href="z-necklaces" >NECKLACES</a> </li> 
      <li ><a title="BANGLES" id="z-bangles" href="z-bangles" >BANGLES</a> </li> 
     </ul> 
     </li> 
     <li ><a title=" - BOUTIQUE" id="-boutique" href="-boutique" > BOUTIQUE</a> 
     <ul class="categories_level_1" > 
      <li ><a title=" - NECKLACES" id="b-necklaces" href="b-necklaces" >NECKLACES</a> </li> 
      <li ><a title=" - RINGS" id="b-rings" href="b-rings" >RINGS</a> </li> 
      <li ><a title=" - EARRINGS" id="b-earrings" href="b-earrings" >EARRINGS</a> </li> 
      <li ><a title=" - BRACELETS" id="b-bracelets" href="b-bracelets" >BRACELETS</a> </li> 
     </ul> 
     </li> 
     <li ><a title=" - STATIONERY" id="-stationery" href="-stationery" > STATIONERY</a> </li> 
     <li ><a title=" - AS WORN BY" id="celebrity" href="celebrity" >AS WORN BY</a> </li> 
     <li ><a title=" - GIFT VOUCHERS" id="gift-vouchers" href="gift-vouchers" >GIFT VOUCHERS</a> </li> 
     <li ><a title=" BLOG" id=" blog" href="/blog/s-wanderlust" > BLOG</a> </li>  
    </ul> 
    </div> 
</div> 



<script> 
jQuery(function($){ 
    var placeholder=$("#productListNavigation-placeholder"); 
    var message=$("#productListNavigation"); 
    var view=$(window); 
    view.bind("scroll resize",function() 
     { 
     var placeholderTop=placeholder.offset().top; 
     var viewTop=view.scrollTop(); 
     if((viewTop>placeholderTop)&&!message.is(".productListNavigation-fixed")) 
      { 
      placeholder.height(placeholder.height()); 
      message.addClass("productListNavigation-fixed") 
     } 
     else if((viewTop<=placeholderTop)&&message.is(".productListNavigation-fixed")) 
      { 
      placeholder.css("height","auto"); 
      message.removeClass("productListNavigation-fixed") 
     } 
    }) 
}); 
</script>

来源

2013-10-29 user125264

这里是我的jsfiddle解决方案。

在下面的代码中，我检查菜单是否与页脚相交。如果有，它会向上移动菜单。当你向上滚动时，它将使菜单回落到原来的位置。

$(function(){ 
    var menu = $("#productListNavigation-placeholder"); 
    var menuOriginalTop = $(menu).position().top; 

    $(window).scroll(function() 
    { 
     var scrollyTop = $(window).scrollTop(); 
     var footerTop = $("#footer").offset().top; 
     var menuTop = $(menu).position().top; 
     var menuBottom = $(menu).offset().top + $(menu).height(); 
     var movement = (footerTop - scrollyTop) - ($(menu).position().top + $(menu).height()); 


     if(menuBottom >= footerTop) 
     { 
      // Moves menu up if it intersects the footer 
      $(menu).css({top:$(menu).position().top + movement }); 
     } 
     else if(menuTop < menuOriginalTop) 
     { 
      // Moves menu down if the menu is above the orginal position and menu is not intersecting the footer 
      $(menu).css({top:$(menu).position().top+movement }); 
     } 
     else if(menuTop > menuOriginalTop) 
     { 
      // if the menu get pulled to far down this will pull it back to the original position 
       $(menu).css({top:menuOriginalTop }); 
     } 

    }); 

});

来源

2013-10-29 23:45:22 Matt

有时固定导航菜单

回答

相关问题