Hello. I want to build a layout like this one:
The left section (hero section) takes half the screen width and should behave similar to a fixed div - when scrolling section 1 and 2, it doesn’t change - but when getting to section 3 it should remain behind (as a block div should) along with section 1 and 2. The text inside the hero section should be vertically centered (almost actually).
I think it can be done by setting the hero section a fixed position and when the user scrolled to section 3 and beyond, it should become block. As I use React, and this solution involves Intersection Observer API, I find it pretty hard to combine both as a React beginner, so I seek for an easier solution.
How would you implement a layout like this ?