position: sticky;

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 …

position: sticky; is a post from CSS-Tricks