I hope this improves performance when scrolling on iOS etc. It's currently almost impossible to get that right using javascript, because it's all hardware accelerated and scroll events don't fire reliably.
Many web sites have elements that alternate between being in-flow and
being position:fixed, depending on the user's scroll position. This is
often done for elements in a sidebar that the page author desires to be
always available as the user scrolls, but which slot into a space on the
page when scrolled to the top. It can also be done for table headers
which remain visible after the top of the table has been scrolled off-
screen.
Lots of sites, such as news.google.com (the "Top Stories" sidebar) and
yelp.com (the search results map), use scroll event listeners in
JavaScript to achive this effect. However, browsers are increasingly
moving towards scrolling implementations that make use of hardware
acceleration to improve performance, for example by leveraging the GPU,
and doing scrolling on a thread other than the main UI thread.
In this situation, browsers may use fast scrolling but fire scroll
events asynchronously, which will result in rendering glitches on pages
that update element positions from JavaScript via scroll events.
Alternatively, the browser may fall into a slow scrolling mode when
scroll events are listened for; this impacts the perceived quality of
the browser's scrolling. To address this problem, common scrolling
behaviors like this should be exposed declaratively, through CSS.