How to make an element slide with the viewport as it scrolls?

Question

I've Googled for this but must be using the wrong keywords.

Basically I want to use the effect that Magento and now Stack Overflow uses. That is, there is an element in a column, and when you scroll down, it sticks to the top of the viewport. And once scrolled up again, it goes back into the normal page flow.

This Ask A Question is a good page for example. Scroll down and watch the "How to Format" element come down (might need to make your viewport smaller if you have a large screen to see the effect).

I've noticed it is setting position: fixed in the CSS. The JavaScript however is obfuscated.

What's the easiest way to achieve this effect? Is there a jQuery plugin available?

Answer 1

Here is an article that should help: http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/comment-page-1/