HTML Sticky Headers

January 2012 · 2 minute read

Sticky headers are heading elements that stick to the top of the window as the user scrolls down the page. This is useful since you can use them to retain the contextual information of the section regardless of the position.

In my case I needed to have multiple headers in the hourly forecast list for hourweather.com.

I found there wasn’t much out there about this topic, especially when you want to have multiple sticky headers per page so I thought I’d share my implementation(which is pretty rough) for others to reference for the main ideas.

Basic Concept

Sticky headers basically work by toggling the headers position type when it reaches the top of the window to fixed so that it sticks in place. The rest of the logic really just handles the flipping from one stuck headers to the next as the scrolling continues up or down the page.