Div在固定位置滚动页面

Even with firebug I can't figure how to achieve this out:

即使有了firebug，我也不知道如何实现:

look at the social div on the left side of the page. It follows you smoothly: which css positioning did they use? I just read an absolute position, nothing more.

查看页面左侧的social div。它流畅地跟随你:他们使用了哪个css定位?我只是读了一个绝对的立场，仅此而已。

I tried the same but it wont scroll in my page
我也试过了，但它不能在我的页面上滚动
using jquery and animate makes it too pretty
使用jquery和animate使它变得非常漂亮。
modyfing the css on each scroll looks pretty weird, it stuck for a millisecond and then move How to get their same effect?
在每个滚动条上移动css看起来很奇怪，它会停留一毫秒，然后移动如何获得相同的效果?

http://techcrunch.com/2011/08/04/sources-livingsocial-close-to-acquiring-turkish-daily-deals-site-grupfoni/

3 个解决方案

#1

Here is a demo of a jquery plugin that takes care of this. This plugin has it's roots in the excellent tutorial that Joe suggested above, but it takes the solution provided in the tutorial a bit farther.

下面是一个jquery插件的演示，它可以解决这个问题。这个插件起源于Joe上面提到的优秀教程，但是它将教程中提供的解决方案更进一步。

Demo: http://jsfiddle.net/y3qV5/

演示:http://jsfiddle.net/y3qV5/

Plugin and source: https://github.com/bigspotteddog/ScrollToFixed

插件和来源:https://github.com/bigspotteddog/ScrollToFixed

Usage:

用法:

$(document).ready(function() {
    $('#cart').scrollToFixed();
});

#2

Try this solution using a bit of jQuery and CSS. It should give you the same effect with quite a bit less work...

使用一些jQuery和CSS尝试这个解决方案。它会给你同样的效果，但工作量会少一些……

http://jqueryfordesigners.com/fixed-floating-elements/

#3

There are two relevant styles for this effect:

这种效果有两种相关的风格:

.post-share-widget.floating {
    position: fixed;
    top: 68px;
}
.post-share-widget.pinnedTop {
    bottom: auto;
    position: absolute;
}

They use a javascript scroll handler to set the className on the widget container to either "floating" or "pinnedTop" depending on the page's current scroll position.

它们使用javascript滚动处理程序将小部件容器上的className设置为“浮动”或“pinnedTop”，这取决于页面的当前滚动位置。

#1