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.
position: sticky; is a post from CSS-Tricks