This layout features two columns where the left column becomes a sticky element when it reaches the top of the screen  and dynamically changes content depending on the right columns scroll location.

The challenge to make this purely in Divi (with a bit of JS) came about from this reddit thread by u/Dramatic-Newt-6337

Keep scrolling to see the effect.

How to use

If you just want to use this as out of the box as possible and don’t care how it works simply download the library layout below and import it via the Divi > Library page. Add the CSS code below for Vertical Centering either via Dashboard > Appearance > Customiser or within the Page Settings > Advanced > CSS (if you don’t want it to render globally)

1. Add slider content and slides in the left column.
2. Add text on the right.
3. Text and Slides should be the same amount for simple use.
4. Edit the code module Scroll Detect & Controller Script and add or remove controllers to match slide number under const buttons. (More info)
5. Modify slider animation under Slider Settings > Advanced > CSS
6. For more slider animations see this post by WPZone.

Tip 1: To use only an image as the slider content try setting a background image for the relevant slide.
Tip 2: Use wireframe view to easily see module labels.

Caveat 1: If a user scrolls too fast the script can get stuck on the wrong slide. It will however self correct when re-entering viewport.
Caveat 2: Mobile scroll effects for unsticking an element is a bit jittery. This is a known issue.  

How it works

The challenge was to do this purely with Divi and minimum additional scripting. It was certainly an interesting little challenge. The good news is that it is certainly doable. I’ve utilised the Slider Module as it was the easiest way to map the left content to some trigger that correlates to the right content and to handle both directions of scrolling.

What I’ve done is externally trigger the slider’s controls to jump between slides depending on where the user is on their viewport.

Enabling Slider Controls in Elements > Show Controls assigns each slide with .et-pb-controllers a:nth-child(1) where 1 is the slide number. So we simply use a script to calculate the scroll position and then trigger the controller for the relevant slide at a given height.

Of course, we don’t want the white navigation dots at the bottom of the slider so we simply set the colour of the controllers to transparent hide them.

To keep things responsive between screens and to allow a simple layout that anyone can import, I’ve:

• made everything full height this way we can trigger the slider control whenever a user has scrolled one full vh distance, we get the user’s vh on the first load. For mobile, we set this to 50vh as we are splitting the columns vertically.
• set both the slider and text modules to 100vh so they always take the full height for larger screens and on smaller ones we halve it to 50vh.
• the slider triggers exactly when the text on the right comes to the centre of the screen for each segment.
• offset the calculation to start only from the top of the section.
• used CSS classes to centre the content within the full-height module.
• setup the script so that it tracks the users scrolling and changes 

You can:

• theoretically use any module on the right column as long as it doesn’t exceed the full vh. Keeping it under 75% is recommended.
  
• change the row, column widths
• use only a background with no content on each slide if you just want images on the left column