0

現在、私たちのウェブサイトにはこのサイド ナビゲーション メニューがあり、うまく機能しています。

固定のサイド ナビゲーション メニューがある場合もあります。つまり、ナビゲーション メニューはユーザーと共にスクロールしますが、トップ ナビゲーション メニューのすぐ下のページの上部に到達すると、ページの上部に固定されたままになります。

私の問題は、メニューがかなり大きくなってきていることです。右のように、メニューがサイトのフッター領域にヒットしたかどうかを検出し、固定に変更してフッター リンクの上にとどまる方法を知りたいです。今ではコンテンツをカバーすることになります。

これを行う簡単な方法はありますか？

以下は私のコードです

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

1 に答える 1

0

これが私の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-29T23:45:22.887 に答える