This content originally appeared on Bram.us and was authored by Bramus!
There’s a new type of CSS scroll-state query coming: scrolled
~
Unlike the scrollable scroll-state queries, scrolled remembers the last direction you scrolled into, which you can use to build “hidey bars”: when scrolling down (or having scrolled down), the hidey bar hides itself. When then scrolling back up, the hidey bar reveals itself.
Here’s the code that is needed to hide a fixed header when scrolling down:
html {
container-type: scroll-state;
}
header {
transition: translate 0.25s;
translate: 0 0;
/* Slide header up when last having scrolled towards the bottom */
@container scroll-state(scrolled: bottom) {
translate: 0 -100%;
}
}And below is the live demo. You can try it out yourself in Chrome Canary with the experimental Web Platform Features Flag enabled. If you browser does not support scrolled scroll-state queries, the header will remain fixed in place – a nice progressive enhancement if you’d ask me 🙂
See the Pen
Hidey Bar Demo (Hide on Scroll Down, Show on Scroll Up // Scroll State Queries) by Bramus (@bramus)
on CodePen.
The feature is expected to ship to Chrome Stable in Chrome 144.
~
If that demo looks familiar: I featured it here on bram.us before, as a demo to use scroll-driven animations to track and remember the scroll direction. Thanks to scrolled scroll-state queries, that hack is no longer needed 🙂
~
🔥 Like what you see? Want to stay in the loop? Here's how:
I can also be found on 𝕏 Twitter and 🐘 Mastodon but only post there sporadically.
This content originally appeared on Bram.us and was authored by Bramus!
Bramus! | Sciencx (2025-10-22T17:03:05+00:00) Solved by CSS Scroll State Queries: hide a header when scrolling down, show it again when scrolling up.. Retrieved from https://www.scien.cx/2025/10/22/solved-by-css-scroll-state-queries-hide-a-header-when-scrolling-down-show-it-again-when-scrolling-up/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.