How to make a div fixed but not loose it's position on the layout

Design help Animations & Interactions
1

Hello!

I am trying to achieve a effect where I basically have 5 divs, all of them width 100% (or 100vw). Div 1 and Div 2 are normal static position, but I want Div 3 to be Fixed position, so that Div 4 and Div 5 would overlap when the user continues to scroll.

My issue is that when I do this, the third div will not stay in place since position flex takes the element out of the normal website flow. How would I still be able to achieve this effect that Div 3 basically stays in place where it’s supposed to be (after Div 2) but then the following Divs scroll over it when the user continues to scroll down?

Since I don’t know how to achieve this, I also can’t post a read only link.

Thank you!

Here is my public share link: LINK
(how to access public share link)

2

Can anyone help with this? Just in case I wasn’t clear with what I need, see this link: https://www.guzimage.com

I basically need this how all sections scroll over the one above it when the users keeps scrolling. I know how to do this for the very first hero section, but again, whenever I use fixed positioning on a section in the middle of my layout, it just dissapears since fixed positioning takes the element out of the flow.

How can I still achieve that affect?