Re: [csswg-drafts] [css-anchor-1] Could anchor positioning work for defining the targets of sticky elements? (#8905)

Another potential use-case for this — accumulating the sticky elements, like when headers of different heights are stacking together. Right now, we have to either hardcode the `top` of the following stuck elements reusing the heights of the previous elements, or use JS and resize observers to read the previous elements' heights and apply them dynamically to the following stuck elements.

An example of such headers: https://kizu.dev/scroll-driven-animations/#joined-sticky-headers — there I had to hardcode the additional offset.

With anchor positioning working with sticky elements, I can see using it something like “max(viewport top edge, previous sticky element's bottom edge)”. For sticky elements, probably it would make sense to treat regular values as relative to the viewport edge, as they're treated now, and mentions to the stuck anchors would use their bottom edge position relative to the viewport edge instead.

And if the acceptance criteria would stay the same — using the last available sticky element that comes in the tree before the one where we're using the `anchor()`, then the code for this could be very concise:

```CSS
.header {
    anchor-name: --header;
    position: sticky;
    top: max(0, anchor(--header bottom));
}
```

And that's it! Each consecutive header would compare the bottom edge of the previous header and the top edge of the viewport, and would either stick to the viewport, or to the previous header.

-- 
GitHub Notification of comment by kizu
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8905#issuecomment-1651280663 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 26 July 2023 09:01:01 UTC