Streaming live at 10am (PST)

Help With Scroll Interactions - Section Scrolling Over Section


#1

This is my first time using Webflow as well as my first website built from scratch. (Project links below)

On the “Press/Booking” Page of the website, I would like the “About” section (plus the rest of the page) to come up over top of the video section while scrolling down. In other words, the video section would be fixed in place while the rest of the sections scroll over top. What settings should I use to have this effect?

Some things to take into consideration - the navbar/header is a fixed element with the a higher z-index so it always stays in view. It has a size animation already where it scales down to a certain size when you scroll down, so the video section would have to account for that left over space. There is also a banner directly under the navbar and above the video section.

So what I would like to happen is when you scroll down, the banner scrolls under the navbar (which it already does) and the video section locks in place when it hits the edge of the navbar, and the rest of the page scrolls up accordingly, scrolling over top of the video section.

The site is done and this is not a must-have feature, but I thought it would be cool and I am trying to learn more about the capabilities of webflow, interactions, etc. Any help would be much appreciated!


Here is my site Read-Only: https://preview.webflow.com/preview/the-marsupials?preview=99fa04172f119fa742908e315e6114ff

Here is my site Published: http://the-marsupials.webflow.io/


Help with background video and element positioning