- From: Sebastian Zartner via GitHub <sysbot+gh@w3.org>
- Date: Fri, 17 Jun 2022 20:46:14 +0000
- To: public-css-archive@w3.org
One downside of using a media query for this is that you're just targetting the viewport with it. You can't target a different scroll container element within your page. Though maybe this could somehow be achieved with container queries as well.
A benefit of this approach is that a media query is independent of the element(s) you actually want to style. Another benefit is that authors can also use this query in JavaScript via `window.matchMedia()`.
Regarding the pseudo-class approach, I like @jonjohnjohnson's idea of functional pseudo-classes. With those, the [threshold mentioned](https://github.com/w3c/csswg-drafts/issues/6400#issuecomment-1158106591) by @chrishtr could be provided as a parameter of that function. That could then look like this:
```css
header {
transition: transform 0.25s ease-in;
transform: translateY(-100%);
}
:scrolling(block-start, 20px) > header {
transition-delay: 250ms;
transform: translateY(0);
}
```
Sebastian
--
GitHub Notification of comment by SebastianZ
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6400#issuecomment-1159216470 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Friday, 17 June 2022 20:48:25 UTC