Building the web with position: sticky;

Last week chrome announced that it is now supporting position: sticky. To tell you the truth, I never knew about this spec. Didn’t even know that it has been in firefox for a long time.

But when I heard the word sticky, it reminded me of one thing. Sticky Nav!!. I have seen it being used at a lot of places. And I have myself used a library called Waypoints to achieve the same. So this was a good use case for its application.

So, how to use it. Its pretty simple!! First you need to know which DOM needs to be sticky, then you need to decide at what location from the top it needs to be sticky. In my use case it was the navbar, which needs to be sticky when it reaches the top. So I added the following css to it.

nav {
  position: sticky;
  top: 0;
}

And that is it. Thats what it required to convert any DOM to sticky. No JavaScript, no event bindings, nothing!! Just pure css fun!!

There is one more example that I would like to share. This is the demo in a parallax effect is achieved with the help of position: sticky