Subscribe

How to use CSS position:sticky 🦎

✍️

Learn how to use and leverage CSS position:sticky

29 Mar, 2020 Β· 2 min read

How to use CSS position:sticky 🦎

Position sticky is one of those things that I genuinely 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.

When we scroll and usually should see the image disappearing in our demo, it will now stick to the top of that div.

How to use position sticky in CSS?

Depending on the scroll position, a sticky element toggles states between relative and fixed. 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.

To show some real magic, 🎩 we included some flex properties. So we can have one smaller div next to the big div.

Browser support

The position:sticky is widely supported, and I strongly encourage you to leverage it. One of these things adds a nice feature to your website but doesn't affect people who can't see it.

CSS Position:sticky browser support

Show me how you use it!

I would ❀️ to see how you use position:sticky send me a message on Facebook or Twitter with a link to your project.

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next πŸ“–

Bringing perspective to CSS

7 Aug, 2022 Β· 2 min read

Bringing perspective to CSS

Creating a 3D Cylinder shape in CSS

29 Jul, 2022 Β· 3 min read

Creating a 3D Cylinder shape in CSS

Join 1832 devs and subscribe to my newsletter