Split Screen Layout - Half Sticky, Half Scrolling

This is a bit of a repeated discussion but I’m aware there are new features that might mean there are better solutions than one’s already suggested. If anyone can give me some tips on the best current method I’d be hugely grateful.

I’d like to achieve something like this: half on half layout
Which I know has been discussed here: Half on half layout in sections – one half scrolling other one static

And a similar thread here: Half on half layout in sections – one half scrolling other one static

Does anyone know if I require custom code input, or whether I can achieve this just with the webflow tools. I had problems where I could only scroll the scrollable content when the cursor was over the scrollable side (rather than the sticky side). Ideally it would be scrollable on both sides

Thank you


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

1 Like

That’s sections with one side of their content being shorter than the section’s height and set to Sticky with a 0 value on top. ← Every word counts!

1 Like

You can easily do this by using columns and Sticky. Just go section by section.

For Example:

In this site.

For “First Section”
Set ‘Left column’ Position to sticky (Value=0 on top) and leave the right to static or relative.

For “Second Section”
Set ‘Right column’ to sticky (Value=0 on top) and leave the Left to static or relative.

and so on.

Thanks so much for the quick replies! It’s looking good :slight_smile:
Just to reiterate

what I’ve done:

First Column element is the sticky 100vh content on the left, with an empty right hand side column.
I’ve chucked in another Column element for the scrollable right hand side of the page (empty left hand side column, and for right hand side content that is greater than 1vh). I’ve added negative margin to the second column so the content overlaps.

This seems to work well - but I have now gone through your comment and I think I’ve done something a little differently… I think you’re suggesting the scrollable content should be placed within the second column of the first “section” element?

My next issue is having the new section push the previous sticky (0 from top) section upwards. If you have any suggestions here that would be great

Thanks again for your help - so impressed with the community and quick responses

The push should happen automatically. Given that you have made the column sticky instead of the content itself.

Could you share the read only link of your website, so the community can have a closer look?

Hi guys, I am having the same issue. Is there a max view height that needs to be set. My section just bleeds and overlaps and I’m not getting the scroll effect.