如何在滚动时使元素与视口一起滑动?

我已经用Google搜索了但必须使用错误的关键字。

基本上我想使用Magento和现在Stack Overflow使用的效果。 也就是说,列中有一个元素,当您向下滚动时,它会到视口的顶部。 一旦再次向上滚动,它就会回到正常的页面流程中。

例如,这个提问是一个很好的页面。 向下滚动并观察“如何格式化”元素下降(如果您有一个大屏幕可以看到效果,可能需要使视口更小)。

我注意到它正在设置position: fixed在CSS中position: fixed 。 然而,JavaScript被混淆了。

实现这种效果的最简单方法是什么? 有可用的jQuery插件吗?

这篇文章应该有所帮助: http : //www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/comment-page-1/

我注意到google在某些地方执行此操作,例如http://news.google.com/nwshp?hl=en (左侧导航栏)。 据我所知,他们检查页面上的位置,然后在页面向下滚动到足以让元素开始滚动屏幕时将项目设置到固定位置。

它看起来像另一种方法,使用jQuery设置上边距将允许元素滞后并变得波动(如果你不使用动画),因为javascript必须继续定位元素。

这是Ext中的一个例子,如果我在事件处理程序中没有select,它可能会有很大帮助,但它可以工作。

 Ext.fly(document).on("scroll", function(e,t,o){ Ext.select(".pinnable").each(function(el,c,idx){ var y = window.scrollY; if(!el.hasClass("pinned")){ var ypos = el.getY(); if(y>ypos){ el.addClass("pinned"); el.set({ originalY:ypos }); } } else { var origy = el.getAttribute("originalY"); if(origy && y