Post

#CSS scroll-state() container queries in Chrome 133! @container scroll-state(stuck: top) { … } Read all about snapped, stuck and scrollable in this post: developer.chrome.com/blog/css-scr... ↪ nerdy.dev/scroll-state...

This opens up the ability to do even more than it first seems!

whatcha got in mind?!

So thinking about elements that only become visible when they get stuck. So look at that scroll spy in your example, it could be done purely with “stuck” state detection. Put a copy of the header above each section. Make it “appear” only when stuck. Make sure there’s a tiny bit of overlap.

oooooh, indeed! have not seen this trick, but i dont know if calling it a "trick" is fair, seems like legit uses and clever linking to me! cool!

Still trying to figure out the overlap bit. Assume a bit of negative margins on the containers will do the trick. About to install Chrome 133 to try it out in a bit.

Also, another use case is scroll-driven shadows. Already possible with sticky position today, but they “wipe” from the bottom and can look slightly wrong. Stuck state + css transition should let us fade them in and out as the designers intended!