I am trying to create a page where there are multiple sections and as you scroll the header that you are on is always shown at the top of the page (in a fixed element). I want to achieve the same effect as on the iPhone where as you scroll it "pushes" the old header out of the way and replaces it.
I have seen it done with lists, but I want to do it with multiple HTML5 sections.
For example:
<section>
<h1>Header 1</h1>
<p>Text for section</p>
</section>
<section>
<h1>Header 2</h1>
<p>Text for section</p>
</section>
Does anyone have any idea?
Thanks