Make a div fixed up to a certain point and then block again

Hi. I designed a page and want to build it with React. I have a question though.If you look in the image below at the left dark section I want it to remain fixed up to a certain section (the 4th section, where the dark background ends), then it should have a block position.All this while the right sections are scrollable. So the result will be that up to 200vh the left dark section is fixed, while the right 2 sections, each 100vh, are scrollable. Then when getting to the next section the dark div becomes scrollable and a normal flow is set. I’m not sure how to do this.

I think it can be done by setting the dark section to 100vh height and a fixed position and transform it to block when viewport hits the desired section (in this case where in the image the dark section ends - 200vh ) and vice versa.This will involve the intersection observer API.

Is there a better solution ?