Re: Sticky Positioning with tall elements

I'm not sure exactly what behavior you want, but one thing to consider
would be to make the sidebar viewport-height, and have an "overflow:
scroll" container within.  Then, the main document and the sidebar would be
independently scrollable.

> or hits another sticky container

For this sort of behavior, you can just define your sticky container
heights so that they don't intersect.



On Thu, Mar 7, 2013 at 12:20 PM, Joshua Peek <josh@joshpeek.com> wrote:

> 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
>
>
>