Sticky header after scrolling

I think I should be able to do this with CSS. Someone please confirm this.

I basically want to make the nav bar stick to the top of the page after the user scrolls down past it. When you scroll back up, it returns to its position. And, I also want it to work on all browsers.

Here's an example on apples website See how the div on the right scrolls to the top, then stays there? It also returns after you scroll back up.

How...

 

Something like that is probably achieved by using Javascript, as it is not always in the same position on the screen's active area - i.e. it's not always say 10 pixels from the top.

A pure CSS fix would be for it to have the position attribute set to fixed in the CSS

position: fixed;
top: 20px;
width: 700px;
margin-left: -350px;
left: 50%;

Code (markup):

This would create a 'sticky' nav bar at the top of the page, 700px wide, centered.

If you try it for yourself and get stuck, post some code in here!