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?
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.