Hi all,
I am creating a page that has a section which is divided in to two columns (two-third/one-third). These columns will each hold different amount of content, so the length of these will be different, and I would like to avoid having long empty space on one side once the shorter column has been scrolled away.
So I was wondering if there is a way to “fix” the end of the shorter column at the bottom of the browser window until the longer column reaches its end.
Here is an example page I found: http://demo.aggressivemotions.com/barcelona/
Whole page scrolls down normally, until right side reaches “Categories” block, and only the left side continues to scroll, then it moves on together to the footer. Scrolling upwards behaves the same.
For the project reason, I’m not allowed to share the exact page I am working with, but I’ve created a page with the same principle, so I hope I can make my problem clear. (Sorry, it’s very rough 
)
The idea here is to fix the right “office images” column to the bottom of the browser window and have the left “Fruit images” to scroll on… and once the fruit images end, the page proceeds to the blue section.
Any help, thoughts and work around is much appreciated 
Thank you all in advance
Here is my public share link: https://preview.webflow.com/preview/testing-split-screen?preview=36a83c8cffa6f4171151c8eefa7de32c
(http://testing-split-screen.webflow.io/)