適合於按鈕/屏幕頂部的菜單

我在側面菜單上看到了很酷的style/js功能（我可以告訴它是什麼）。你知道當你有一個長的中心頁面，並且/你們雙方中的一方結束並留下空白時的情況嗎？那麼這個網站實現這個東西，當用戶scrool到側菜單結束的地方 - 菜單獲得絕對位置並且不移動。適合於按鈕/屏幕頂部的菜單

我該怎麼做？

如果你想看到一個例子，你可以看看here（只是滾動，並期待在兩側）

來源

2011-05-15 Nir

我相信你可以使用這個達到類似的效果：http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/comment-page-1/（只是把它0移動的速度參數，而不是slow，如在example中），並添加有關當前位置是否適合顯示框的條件（可通過使用.height() jQuery函數獲取框的高度 - 在包含菜單的頁面或框中移動菜單）。

編輯：

您引用的頁面使用下面的JavaScript代碼來支持你試圖完成什麼：

<script type="text/javascript"> 
    $(function(){ 
     var seoHeight = $$('dvIndexSeoMaster').height(); 
      seoHeight = (seoHeight > 0) ? seoHeight : 0; 
     var documentHeight = $(document.body).height() - 120 - seoHeight; 
     var fixedMode = false; 
     var hasFixedClass = false; 
     var leftColElm = $sc('dvFixed'); 
     var leftColPos = leftColElm.offset().top; 
     var leftColHeight = leftColElm.height(); 
     var rightColElm = $$('dvIndexMasterRightCol'); 
     var rightColPos = rightColElm.offset().top; 
     var rightColHeight = rightColElm.height(); 
     function scrollElm(elmPos,elmHeight,objElm, cssClass){ 
      var fixedMode = false; 
      var hasFixedClass = false; 
      var windowTop = $(window).scrollTop(); 
      (windowTop >= elmPos && (windowTop + elmHeight) < documentHeight) ? fixedMode = true : fixedMode = false; 
      if(fixedMode){ 
       $(objElm).addClass(cssClass); 
       hasFixedClass = true; 
      }else if((fixedMode == false)){ 
       $(objElm).removeClass(cssClass); 
       hasFixedClass = false; 
      } 
     }; 
     $(window).scroll(function(){ 
      scrollElm(leftColPos,leftColHeight,leftColElm,'make-fixed'); 
      scrollElm(rightColPos,rightColHeight,rightColElm, 'make-fixed'); 
     }); 
    }); 
</script>

而且make-fixed CSS類的定義如下：

.make-fixed { 
    position: fixed; 
    top: 0; 
    z-index: 200; 
}

來源

2011-05-15 18:41:35 Tadeck

即使用戶滾動，也可以使元素保持在同一位置，使用CSS position:fixed財產：http://www.w3.org/TR/CSS2/visuren.html#fixed-positioning

來源

2011-05-15 18:42:33

你在找什麼是固定佈局。它可以做到沒有一行JavaScript，使用CSS。我在this jsfiddle中發佈了一個示例。不要猶豫，玩弄它。

你提供的例子並不是那麼好：在向下滾動某個點之後，右邊的菜單消失了，它的一切動作都很古怪。

來源

2011-05-15 20:09:02 KooiInc

我沒有看到在你的例子中實現..它固定的位置，但元素不是在一開始的地方，只有在一些滾動獲得固定的位置後...我錯過了什麼？ – Nir 2011-05-15 20:39:03

適合於按鈕/屏幕頂部的菜單

回答

相關問題