Solved by CSS Scroll State Queries: hide a header when scrolling down, show it again when scrolling up. 관련

CSS > Article(s)

---

Article(s)

---

Solved by CSS Scroll State Queries: hide a header when scrolling down, show it again when scrolling up.

There’s a new type of CSS scroll-state query coming: scrolled

See Hidey Bar Demo (Hide on Scroll Down, Show on Scroll Up // Scroll State Queries) by bramus on CodePen.

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%;
  }
}

Note

Good suggestion by meduz on Mastodon, in case the header contains some interactive content that you can focus:

Use header:not(:focus-within) to avoid hiding the bar if there’s focus in it.

Below is a live demo using the code above. 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 Hidey Bar Demo (Hide on Scroll Down, Show on Scroll Up // Scroll State Queries) by bramus on CodePen.

The feature is expected to ship to Chrome Stable in Chrome 144. ~

Note

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 🙂

Solved by CSS Scroll State Queries: hide a header when scrolling down, show it again when scrolling up.

---

There’s a new type of CSS scroll-state query coming: scrolled