div that sticks to the top when you scroll past it in jquery

For example...the new facebook activity stream on the right. Or on okay cupid (the message/rating dialogue).

How does this work exactly. Can someon开发者_高级运维e point me to a tutorial or explanation?

Thanks!

There are many ways to do this but here is one using CSS only

<div style="position:fixed; left:0; top:0; height:100px; width:100%">Stuck to Top</div>

Here is a fiddle

http://jsfiddle.net/2kmQe/

Add some Javascript to set position: fixed; top: 0px; when $(window).scrollTop() reaches the $("#element_id").offset().top.

Google does a similar thing with their new gmail look