Lesson 8/8

Scroll animations with position sticky

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.

Scroll this example 👇
Sticky div
Not so sticky div
Some content after, that is taller than our scrollable section.

Unlock the full lesson with PRO

Want to read the full lesson? Join Frontend.FYI PRO.

PRO is a one time purchase of €149 that gives you lifetime access to this course, any courses released in the future, and so much more!