via https://air.mozilla.org/intern-presentation-ford/ - Here’s an exciting pseudo-proposition to CSS3:
position: sticky. “Sticky” elements are similar to fixed positioning, in that they stay “fixed” to a viewport-relative position. The difference with sticky elements though (and one that I’m very excited about) is that sticky elements maintain their relativity to their parent containers. A trend that’s been going around a while in web design lately has been having elements remain sticky only for certain parts of a page. To paraphrase somebody that can explain this behaviour better than I:
Many web sites have elements that alternate between being in-flow and having
position: fixed, depending on the user’s scroll position. This is often done for elements in a sidebar that the page author wants to be always visible as the user scrolls, but which slot into a space on the page when scrolled to the top. Good examples are news.google.com (the “Top Stories” sidebar) and yelp.com (search results map). Edward O’Connor
As mentioned before, sticky positioned elements stay “fixed” to the page, but maintain their relativity to their parent containers. That means that the old way of keeping an element “stuck” to the viewport can now be achieved 100% with CSS. No event listeners to slow down performance of the page, no layout reflow issues, just good, clean CSS. Unfortunately, as far as support goes,
position: sticky doesn’t get much. As of this writing, there are no official specs concerning
position: sticky, and browser support is pretty experimental. While I don’t recommend using position: sticky in your production code, I do think that this feature is welcome and fits CSS’s spec. I for one hope to see it implemented soon; what about you? Thoughts?