Stop Using JS for Sticky Headers: CSS Scroll-State is Here!
Update: it seems this only works mostly in chrome based browsers i tried in firefox and brave and this was not working correctly. 🥲
Ever wanted to style an element specifically when it becomes "stuck" at the top of the page? Traditionally, we've needed JavaScript Intersection Observers or scroll listeners for this, but CSS Scroll-State is changing the game.
In this video, we dive into a powerful new CSS feature: container scroll-state queries. This allows you to selectively apply styles to elements based on whether they are currently in a "stuck" position—with zero JavaScript required.
What we cover:
How to detect the "stuck" state using pure CSS.
Browser support (Chrome, Edge, and Android updates).
A breakdown of the container-type: scroll-state syntax.
A live look at a playground demo showing the background changes in real-time.
If you’re looking to simplify your code and lean into the future of the web, this is a must-watch.
Links mentioned: andreruffert.com (when i checked this site again it seems the post is removed)
#CSS #WebDev #Frontend #CodingTips