有时固定导航菜单

Question

我们目前在我们的网站上有这个侧面导航菜单，效果很好。

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

我的问题是，我们的菜单变得非常大，我想知道如何检测菜单是否已到达网站的页脚区域，并将其更改为固定并停留在页脚链接上方，因为现在它最终覆盖了内容。

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

下面是我的代码

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