howto create the iPhone Contacts header scroll Effect for html?

Question

I've setup a basic jsFiddle to give more of an idea of what I'd like to happen.

http://jsfiddle.net/nicekiwi/p7NaQ/2/

Hopefully if you think of the contact page on the iOS for the iPhone in terms of what section of the alphabet of contacts you're looking at and how it changes as you scroll the page you'll get the idea, if not read on.

Basicly, I have sections of content within a single column vertical scrolling page. When the top of the first header (title 1 in the jsFiddle) get to the top of the screen as ou scroll down the page it would stick at the top until you get to the next header (title 2), at the point "Title 2" would hold its position while you scroll and "Title 1" would be pushed up out of site and so on for the rest of the headers.

And when scrolling back up the page the reverse would happen eg.. "title 4" would stay in place and when the bottom of "title 3"s content was reached "title 3" would seamlessly appear above "title 4" and stay at the top of the screen till it reaches the top of its own content.

I want to create this in HTML/CSS with Mootools 1.3 as my JavaScript Library of choice.

Any ideas on how I could do this? Cheers.

Answer 1

I didn't actually see your post until someone pointed mine out as a duplicate, take a look at this Freeze Header until Irrelevant (HTML, CSS and JS)