position: sticky;

Avatar of Chris Coyier
Chris Coyier on (Updated on )

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.

Better position: sticky; support is on the horizon. WebKit dropped in 2013, Firefox in 2014, and now Blink in (probably) 2016.

MDN explains it well:

Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned.

Šime Vidas pointed this out in a recent Open Web Platform Daily Digest, and ported over the demo from MDN, which demonstrates the usefulness nicely:

See the Pen Sticky positioning by Šime Vidas (@simevidas) on CodePen.

As you can see in that demo, it’s a decent candidate for progressive enhancement, as if you don’t see the sticky header feature, it’s no big deal.