How to use CSS position:sticky 🦎

— 2 minute read

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.

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?

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

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.

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.