Fixed background until items revealed on scroll

Design help Animations & Interactions
1

Hello everyone-
I’m wondering if this question has been asked before, I just can’t seem to find the appropriate search terms for exactly what I’m trying to do.

My page is made of 3 stacked divs, each serving as a separate section. In the initial div, I need to have a fixed background until three elements are revealed by the scroll bar, and then the entire section can move per a regular scroll.

In my mind it’s similar to the interactions on this webflow page [Ecommerce Website Builder | Webflow], except that instead of the scroll continuing to move down the page, the scroll converts to just revealing items until they are fully revealed.

Is this even a thing? Is this possible? What is it called?

Thank you for any insight!

2

Hello @MallPalm,

I think what you are referring to is position sticky. what position sticky does is explained in this video Creating a sticky sidebar — Webflow tutorial - YouTube I hope this helps.

3

Ah, this is a great start! I didn’t realize you could sticky up until a defined distance, thank you!

1 Like