How to use CSS position:sticky π¦
permalinkHow 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.
See the Pen How to use CSS position:sticky π¦ by Chris Bongers (@rebelchris) on CodePen.
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 relative
and fixed
, depending on the scroll position. It keeps having a relative
position until we hit a given offset, and then it acts like a fixed
element.
We set the following properties on the element we want to behave sticky
:
position: -webkit-sticky;
position: sticky;
top: 0px;
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
The 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.
Show me how you use it! permalink
I would β€οΈ to see how you use position:sticky
send me a message on Facebook or Twitter with a link to your project.