Jhey ʕ·ᴥ·　ʔ on Mythryl: “super easy CSS sticky scroll hide/reveal 🧑‍🍳 .sticky-atc {…”

super easy CSS sticky scroll hide/reveal 🧑‍🍳 .sticky-atc { position: fixed; inset: auto 0 0 0; transition: translate 0.26s cubic-bezier(.55,0,.67,1.25); /* hide when scrolling down */ @container scroll-state(scrolled: bottom) { translate: 0 100%; transition-delay: 0.5s; } }

Bramus@bram.us

There’s a new type of CSS scroll-state query coming: “scrolled”. This one 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.

22/10/25, 11:22 pm2 reposts47 likes

Post