Streaming live at 10am (PST)

Sticky Div design problem


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:

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…?



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