Half scroll, half fixed sections - CSS layout

I am trying to accomplish a layout that has 4 sections, each is an inverted version of the last. Each should take up 100% of the screen. The sections are split in half vertically into 2 containers (aside, and main). The aside stays fixed, while the main container holds content that is longer than the length of the screen, therefore needs to scroll. The aside should stay fixed for the duration of that scroll until the end is reached, at which point we will scroll to the next (inverted) section with the aside and main containers switching sides.

This is an example of what ive come up with. I just breaks when I set aside height to 100vh. https://codepen.io/marti2221/pen/XgLmzr

Sections just aren’t taking up the whole screen. Some JS may be necessary to read when the scroll is done, idk. I just cannot get this to work. Here is an example of what I want the layout to operate like. http://melaniedaveid.com/

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.