有時會修復導航菜單

Question

我們目前在我們的網站上有此側面導航菜單，效果很好。

它具有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>

Answer 1

這是我的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 });
         }

     });

});