How to use CSS position:sticky 🦎
Position sticky is one of those things that I truly enjoy in CSS. Simple, easy, but makes such a difference.
You can see a demo below scroll down and see the first image being sticky to the left.
In our demo, when we scroll and usually should see the image disappearing it will now stick to the top of that div.
How to use position sticky in CSS? permalink
A sticky element toggles states between
fixed, depending on the scroll position. It keeps having a
relative position until we hit a given offset, and then it acts like a
We set the following properties on the element we want to behave
This tells the element it should be sticky and stick to the top.
For it to show some real magic, 🎩 we included some
flex properties. So we can have 1 smaller div next to the big div.
Browser support permalink
position:sticky is pretty widely supported, and I would strongly encourage you to leverage it. It's one of these things that adds a nice feature to your website but doesn't effect people who can't see it.