How to make a CSS/javascript feature like this website?

Question

I'd like to do the EXACT same effect as the "SHOW PAGE CONTENTS" menu on the right of this website: http://www.quirksmode.org/blogs.shtml

Notice you can scroll down and the menu will follow (very smoothly). When you scroll back up, it "locks" back into its position. This is not a simple Position:fixed.

I have tried this with javascript (JQuery Scroll...if scroll is below a certain pixel, then change the DIV "top"), but it is very choppy and not smooth.

Can anyone tell me the SIMPLEST way to create this EXACT effect? I really appreciate it if you could help me. Thank you everyone.

Answer 1

It's not pure CSS, it's Javascript modifying the CSS on the fly.

Have a look as his JS file and look at the window.onload and setMenuOffset functions.