Re: Sticky Positioning

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;".  Or, alternately, "margin-top: 10px; position: relative;
position-contain: viewport;"

This isn't perfect - since it's fixed, it won't 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.

~TJ

Received on Wednesday, 27 June 2012 23:02:10 UTC