How can I keep I prevent scrolling until the end of BOTH the main image section and the product information section are reached?

[ad_1]

Hello!

I want to achieve an effect similar to the one used by [this website]), which makes the right column sticky until the end of the left section is reached, after which everything scrolls as normal.

The difference is that, in my case, sometimes the left column is longer, sometimes the right column is longer. I want to keep the shorter side sticky while the longer one continues to scroll down. When the longer side also reaches its end, then the whole website should scroll down as normal.

Unfortunately my website is still on localhost so I can’t share its URL yet but if you need to know any specific questions, please ask away. [This is the theme I am using]).

Thanks so much!

**EDIT:**

Maybe I didn’t explain it clearly enough.

The section that should be sticky (either left or right) varies based on its length according to each product. Sometimes it’s the left, sometimes it’s the right one. Once the end of the section that is **NOT** sticky is reached as the user scrolls, **NEITHER** one should be sticky anymore. so that the content below these two sections can be displayed.

It necessarily involves JavaScript, as far as my meager knowledge tells me.

[ad_2]