适合于按钮/屏幕顶部的菜单

我在侧面菜单上看到了很酷的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

适合于按钮/屏幕顶部的菜单

回答

相关问题