Sticky Div design problem

Hey,

I am trying to achieve something and it’s given me a bit of a brain freeze!

So I have a 100vh Hero (div-1) which I want to scroll up and reveal a second div beneath (div-2) which is sticky until the div-1 scrolls out of view, at which point the div-2 will start scrolling.

And that’s fine, I have achieved that by having both divs inside a sticky container (200vh) and div-1: absolute (100vh), div-2: sticky (100vh). This is working here: https://preview.webflow.com/preview/alistairs-first-project-e51933?utm_medium=preview_link&utm_source=designer&utm_content=alistairs-first-project-e51933&preview=ec9e9cf99f2993e5208203623534af81&pageId=5f5661bbca15845b89e69bcf&mode=preview

However, what about if I want div-2 to be larger than 100vh? For example I want it to be 200vh, and for there to be text etc below the image in the example shown. But I want the image to remain central when div-2 is revealed and I still want div-2 to only start scrolling once div-1 hits the top of the viewport?

Hope that makes sense, I can’t seem to work out how I would do that…?

Thanks

Alistair


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

1 Like

Hi, How did you end up solving this please