Sticky headers in complex web form (a la iPhone)

Question

I'm designing a complex web form (for trained users, not drive-bys) that has many sections, many of which contain subsections. The form could become quite long, depending on the situation. Usability would be greatly enhanced if (sub)section headers would remain visible until the (sub)section has completely scrolled past.

For example, when scrolling through music artists on the iPhone, the "A" header remains visible until the "B" header scrolls up, bumping "A" up and off the screen. Similarly, Excel allows you to freeze the top row of a table, although this isn't quite as rich as the iPhone example.

Is this possible with HTML/CSS or will it require JavaScript too? Are there any examples out there of this type of behavior? Any tips or leads you could offer? I don't even know where to begin.

Edit: So I'm thinking the header div should be top-aligned with the intersection of the view pane and the content div:

   +--------------+
   |  [content]   |
+-------------------------+
|  | +----------+ |       |
|  | | [header] | |       |
|  | +----------+ |       |
|  |              |       |
|  |              |       |
|  +--------------+       |
|                         |
|      [view pane]        |
+-------------------------+

Answer 1

I do not believe it's possible without JavaScript. The pitfall is in having the header change as you scroll into a new section. Or, more generally, having it both be scrollable and then attaching to the top of the window when it gets there. I believe you will have to use JavaScript to check for the position of the viewport and attach the appropriate header at any given time.

I apologize that I do not have time to work out a solution for you, but I hope my answer provided some further insight.

Answer 2

This is one of those things that will, almost definitely require javascript. CSS3 allows for some relatively complex behaviour, but I don't think it allows for anything this complex.

However, I can point you to a jQuery implementation of this, by Remy Sharp, of jQuery for Designers and Left Logic: iPhone-like sliding headers.

I think that this addresses your question, and comes with a video-podcast bonus... =)