Re: [csswg-drafts] [css-position] ‘Sticky’ behavior is too limited as position scheme created from the elements nearest block level ancestor & margins (#2496)

Came across an excellent [peekaboo header example](https://codepen.io/jaffathecake/pen/OJvbpRZ) from @jakearchibald recently.

It uses an extra sibling element and margins to reposition the element, while using both sticky top and bottom.

The extra sibling element is needed as other positioning schemes are not available when using sticky positioning (issue 3).

This could have been solved by the proposed solution:

```css
position: relative;
top: 0px; /* dynamically updated to current offsetTop */
sticky: top calc(-1 * var(--height)), bottom calc(100% - var(--height));

```

I think there are plenty of "tricks" like this in the wild. Would it be useful to collect more of them?

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


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

Received on Thursday, 4 August 2022 19:29:19 UTC