Scroll animations with position sticky

Unlock this video and the rest of this course by joining Frontend.FYI PRO .

Position sticky is a relatively new CSS property that allows you to create sticky elements on your page. It’s a mix between position: relative and position: fixed, and it’s perfect for creating sticky headers, footers, or sidebars.

However, it is also a great tool for creating even more immersive scroll animations! It allows you to ‘stick’ an element to the page for the full height of it’s parent container. This means you can create animations where the animated element, seems to ‘stick’ to the page as the user scrolls. Let’s take a look at such example.

In the video above you notice that the page keeps scrolling (look at me dragging the scrollbar on the right), all while the text stays in the center of the screen. At the same time the text is moving horizontally. Such a cool effect!

How position sticky works

You can make an element sticky by setting its position to sticky. Next you also need to set at minimum one of the the top, right, bottom, and left properties to adjust the position of the sticky element.

1
.sticky {
2
  position: sticky;
3
  top: 0;
4
}
5

6
.sticky-bottom {
7
  position: sticky;
8
  bottom: 40px;
9
}

Or if you’re using Tailwind, you can use sticky top-0.

As soon as you do that, the element will stick to the first block level parent (has display: block) it can find, for the full height of that parent.