Re: Sticky Positioning

On Jun 27, 2012, at 4:01 pm, Tab Atkins Jr. <jackalmage@gmail.com> wrote:

> On Wed, Jun 27, 2012 at 10:32 AM, Edward O'Connor <eoconnor@apple.com> wrote:
>>> I think http://www.xanthir.com/blog/b48H0 addresses the same problem
>>> more generally.
>> 
>> The solution in Tab's blog post solves ALL THE PROBLEMS; it is
>> essentially a Grand Unified Theory for positioning. Which is
>> interesting, and definitely worth pursuing. But just because we *could*
>> describe a positioning value in terms of such a Grand Unified Theory
>> doesn't mean that we shouldn't make incremental improvements to the
>> platform now, and add such generalized features later when they're more
>> baked.
> 
> Ignore the first part of that blog post.  Just look at the end, the
> "Containing the Positioned Element" section.  This bit is carveable
> from the rest of the proposal, and solves stickypos in a pretty simple
> way.
> 
> If you want a heading that sticks when it gets within 10px of the top
> of the screen, make it "position: fixed; position-contain: parent;
> top: 10px;".

position:fixed will make it out-of-flow, which you don't want.

> Or, alternately, "margin-top: 10px; position: relative;
> position-contain: viewport;"

That's basically our proposal.
> 
> This isn't perfect - since it's fixed, it won't scroll left/right.

Sticky will scroll left/right.

> The problem is caused by the fact that you want it to be fixed
> vertically but relative horizontally.  We should fix that generally -
> that's the first part of my blog post.

I think the proposal is interesting, but we'd like to start with something
simple, and extend it later if sufficient use cases come up for more complex
behaviors. I think we'll get a lot of mileage out of the simple sticky behavior
we proposed.

Simon

Received on Thursday, 28 June 2012 03:23:51 UTC