javascript - Fix object to top of browser window when scrolling

Question

I saw recently a new interesting feature in the new gmail and also in the HTML5 bing preview that fixes a navigation bar to the top of the browser window when scrolling. The bar may start 100px down the page but when you scroll and it reaches the top of the browser window, it fixes there until you scroll back up above where it was originally positioned.

My question is; how can I do this effect or do something similar to this effect?

I hope you can understand my question and what I'm trying to describe.

Answer 1

If you want the element to start further down on the page, then stay fixed on the top as you scroll down, this may be a good start:

http://jsfiddle.net/cc48t/