position: sticky is Amazing

CSS just got a sweet little upgrade. position:sticky just landed in Chrome 56. Sticky positioning in CSS lets us build some really neat interactions in very few lines of code. It’s useful for any time you want a UI element to stick around in view as the user is scrolling, but not become sticky until the element gets to a specific distance from the top/bottom/left/right egde of the scrolling viewport. It’s like a position:fixed element that’s a sleeper agent spy. It behaves just like a regular position:relative element – even fooling its own parents and siblings – until the secret distance is met, activatating the position:fixed behavior of the spy.
What Can We Build With It?

Sticky position is perfect for things like the iOS style list headings. Scroll the content and watch the headings stick once they hit 0px from the top edge.