Streaming live at 10am (PST)

How do I create a sticky section that layers sections on top of each other?

I recorded a Loom video of what I’m trying to accomplish: Loom | Free Screen & Video Recording Software

In short, I want to create a sticky section where: as I scroll, the content of each section fades in and out, and the next section replaces it, all while the viewport is stuck until the end of the 5 sections.

Here is my read-only link: Webflow - Almanac Docs

Here is my published link: New home

Thank you for taking a look and if anyone can help, I’d greatly appreciate it!


Hey, if I understand it correctly, you probably want to be working with fixed sections inside a sticky scrolling container.

Something like what I’ve made for this cloneable, but reversed: sleepy-interactions - Webflow

Each section at the bottom would initially be pushed down 100% (or 100vh) on their Y-axis transform values, where each section would have a higher z-index than the one before, making them stack on each other.

Then you would add a “while scrolling in view” interaction on their parent scrolling container, animating each section’s Y-axis transform values back to 0% one after another.

I also have this cloneable which features one of those described above (the red one) which may help a bit: hidden-hover-sections - Webflow

And this video I made which isn’t exactly what you’re looking for, but also may help a bit: Smooth Horizontal Fixed Section Scrolls in Webflow - YouTube

:slight_smile: