CSS position fixed vs sticky
August 29, 2020CSS 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.
🙌🏼Share this
📋More articles
Tools that I usually used as a Web Developer
For almost 2 years I have doing web developing as a job from designing landing page until write API for laravel-based web application in windows machine. Now I like to share my everyday tools for web developing that I usually used.
You can do these on Figma to work faster
Figma became popular these days to design a web/mobile user interface. That’s because Figma gives you more modern and reliable approach when come to performance, cloud storage, and collaboration. Now I wanna share with you how you can improve your designing process to work faster with Figma.
Kindle has changed my reading habits
Reading on a physical book and reading on a kindle give different experience. Those two things feel different when open the next page, highlights the text, holding it while reading, and so on. On this post, I wanna share with you what experiences that kindle will give to me compared to physical book.
Protect your form against spam bots
I was in the middle of embedding a third-party form on the website. The form snippet is just like the usual HTML form and the website is built using Next.js. At first, I thought it’s working well, fill the fields and submit it. But my team was told that we received various weird submissions with