CSS position fixed vs sticky

CSS position: fixed helped me a lot when I want to make an element inside a web to stay when user scrolling the page. But in some cases, maybe I want that element still scroll along like others but can stay in place when I want it to stay. That’s position: sticky will helpful.

What’s the difference?

The position: fixed mean fixed to the viewport. We tell it where to position itself (top, bottom, right, or left) and it will stay there when user scrolling.

Meanwhile, when using position: sticky it won’t affect until we define offset, like top: 10px. So the element will scroll like others until it reaches the offset and then stay on its position. And it stay within its parent, once the parent scroll off the page it leaves with it.

To see it in action, you can check on my codepen

Which should I use?

It depends, when you want that element simply doesnt move in your website then use fixed. But be careful with position: fixed, it can potentially cover other element.

When you want that element scrolling into view and then stop at certain point, use sticky. Keep in mind, when its parent scrolls off page, it gone with its parent.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s