Sticky Positioning ⇥ lists.w3.org

Edward O’Connor writes in the W3C’s www-style mailing list:

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.

The effect O’Connor describes is similar to the always-visible letter banners when scrolling through table views on iOS, and it can only be implemented on the web with a bunch of javascript.

It should be much easier in the future, as Monday’s WebKit nightly build included a brand new position: -webkit-sticky; syntax:

A stickily positioned element behaves like position:relative (space is reserved for it in-flow), but with an offset that is determined by the sticky position.

I love stuff like this. Via Dave Rupert, via Chris Masterson.