Re: [css-position] Sticky positioning computations

On Wed, 2014-03-05 at 22:36 +0000, Rossen Atanassov wrote: 
> > > - Should the ReleasePosition be computed any differently if the
> > > ContainingBox is also the ScrollerBox?
> > 
> > Does it makes sense to have sticky positioning if container box is itself scroller
> > box? If there is no use case, I would suggest just disallow sticky positioning if
> > container box is scroller box and fall back to normal flow.
> 
> I can certainly see use cases for that. Headers followed by paragraphs of text
> is one such scenario where an author might want to make the headers sticky.

But what would be used as boundary that will push StickyBox out of
scroller box during scroll. For example, when next paragraphs with
another header are coming to the top of scroller box?

> > > - Should the StickyPosition apply if the static StickyBox.top is already above
> > > initially?
> > 
> > I think yes. For example, table header in the middle of long list.
> 
> OK, but what that would mean is that a the box will "jump" to the sticky position
> and get stuck there. Consider the following scenario:
> 
> <div style="overflow: scroll; height: 5em; width: 5em;">
>   <div style="border: 1px solid blue">
>     <div style="position: sticky; top: 0px; margin-top: -2em; height: 4em"></div>
>   </div>
> </div>

In the given example sticky box will stay at the normal flow position because it will be 
pushed back by blue border container bottom.

But if I modify example this way:

<div style="overflow: scroll; height: 6em; width: 20em;">
   <div style="border: 1px solid blue; padding: 2px"> 
     <div style="position: sticky; top: 0px; margin-top: -2em; height: 4em; border: 1px solid red;"></div>
     <div style="height: 5em; border: 1px solid green;">
       Space for sticky offset.
     </div>
   </div>
   <div style="height: 10em">
     Space of blue border box to scroll out.
   </div>
</div>
</div>

I've added some padding to blue box to make blue border better visible.
This example works in Firefox 27.0.1 if layout.css.sticky.enabled is set
to true in about:config .
Also works on chromium trunk.
When this example loaded into browser, the red border sticky box is
immediately offset by sticky positioning and overlaps with green box.
When scroll box is scrolled red box stays at the same position until
gets pushed out by blue box bottom.
As Corey already replied, sticky offset is a function and is calculated
on every scroll position change.
In my example red box will never appear at the normal flow position,
however normal flow position is used to calculate sticky box position
internally.

Received on Thursday, 6 March 2014 20:09:14 UTC