Sticky Positioning with tall elements

One of the use cases for position:sticky is implementing sidebar
elements that follow along as the user scrolls. You might show a TOC
listing along side a long document like the HTML5 spec.

Using the -webkit-sticky implementation, it initially works pretty
well to achieve this without any javascript. However, the behavior
when the sidebar content extends passed the viewport seems undefined.
As you scroll, the sidebar content remains fixed until it reaches a
point where the bottom of the element would exceed the dimensions of
its positioned container. This creates a strange user experience that
requires the user to scroll to the bottom of the document see the
sidebar's full contents.

Demo html - https://gist.github.com/josh/5102287
Demo video - http://f.cl.ly/items/162D2G0P310U1j1b2t2Z/video.mov

I'm wondering if this behavior is mostly undefined and just not spec'd
yet. Or if this is something we can make configurable so the bottom of
the container will stick until its scrolled passed or hits another
sticky container. This is a little different than just specifying
bottom:0.

Thanks,
Josh Peek
Programmer, GitHub

Received on Thursday, 4 April 2013 10:02:32 UTC