Sticky headers πŸ’»

|

CSS introduced the property position: sticky in 2012, one obvious application of this is for making sticky headers.

The idea is straightforward: If an element has position: sticky, treat it as a normal position: relative block, as long as it’s on screen. If the user scrolls far enough that the element (let’s say it’s a h1) would be scrolled off the screen, but the h1’s parent div is still visible onscreen, treat it as though it were position: fixed with whatever position you specify it with through: top, left, right, bottom.

The problem was that adoption of this property was slow by some browser vendors, but that has changed eventually, so we can embrace it now!

So, how do you make sticky headers with just css?

It’s super-easy. All you do is add

position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: sticky;
top: 0;

and that element will stay on top always.

Tables

One of the best use-cases for this is with really long tables. That is, tables where you want to see the column headers on top as you scroll down.

There is one caveat though, Chrome and Edge have a bug with using position: sticky on thead. So, the way around this is to apply it to th instead.

See the Pen Table Sticky Header using position:sticky; by rob (@robjoeol) on CodePen.

You can also use it to make sticky headers on the side and top for easy cross-referencing! So it kind of mimics frozen rows in Excel!

See the Pen Cell Zoom πŸ” by rob (@robjoeol) on CodePen.

Browser Support

As long as you avoid using it on thead, you are good on the 4 major desktop browsers. IE be damned!

browser support

Related Posts