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.
1 <div className="border-white-opaque max-h-[400px] overflow-auto border">2 <div className="min-h-[100px] text-center text-2xl">3 Scroll this example 👇4 </div>5 <div className="bg-white-opaque grid h-[800px] grid-cols-2 items-start gap-3 rounded-3xl p-3">6 <div className="sticky top-0 rounded-2xl bg-black p-3">Sticky div</div>7 <div className="rounded-2xl bg-black p-3">Not so sticky div</div>8 </div>9 <div className="h-[500px]">10 Some content after, that is taller than our scrollable section.11 </div>12 </div>
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!
Next lessonreleasing soon
Module 7 – Lesson 1What are layout animations?