Div scrolling with the page in a fixed position

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

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.

1. 开发者_StackOverflowI tried the same but it wont scroll in my page
2. using jquery and animate makes it too pretty
3. modyfing the css on each scroll looks pretty weird, it stuck for a millisecond and then move How to get their same effect?

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

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.

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

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

Usage:

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

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

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

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.