Re: Sticky Positioning with tall elements

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

But if the sidebar were position:fixed, you'd never be able to see the bottom sidebar
contents.
> 
> Demo html - https://gist.github.com/josh/5102287
> Demo video - http://f.cl.ly/items/162D2G0P310U1j1b2t2Z/video.mov

This behavior is what is intended, and seems reasonable to me.

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

I'm not sure what behavior you are suggesting, Can you mock something
up with JavaScript?

Simon

Received on Saturday, 9 March 2013 00:51:33 UTC