Post

#CSS scroll-state() container queries: the "stuck" query ```css @container scroll-state(stuck: top) { box-shadow: var(--shadow-5); border-radius: var(--radius-3); margin: var(--size-5); } ``` article coming soon! (currently in Canary experiments)

59 reposts509 likes

Is there by chance a way to use scroll-state to mimic the behavior of hiding the header on scroll down and showing on scroll up?

Is it really „top“ and not „start“/„end“? My first initial reaction to „stuck“ was, that I thought it would do something else than it does - literally the opposite is what I was thinking about 😅

Like container queries, the stuck element cannot query itself. A child can! you'll need a stuck wrapper around the item that wants to react to its stickiness