How to stick a div half way while scrolling?

Hi, webflow community!

I’m new to webflow and not very familiar with all its magic features. So need your advice.

I need your help with some rather simple task but I have no idea how to solve it. My goal is to make two columns. The right one (blue) will be sticky with some animations on scroll. It requires to be 500vh high. The left column (blue) will contain some cards inside and it will be way smaller than the right column. And my main issue is to make the left column STOP at the bottom of the right block while it is still scrolling with its animations.

Any suggestions, tutorials, and tips are very much appreciated. The link to the project:
https://preview.webflow.com/preview/scroll-tests?utm_medium=preview_link&utm_source=designer&utm_content=scroll-tests&preview=08981c4b7e672c1cfdcda9be62243818&mode=preview

Thanks in advance!

You need to remove height from both divs (column left and right). :slight_smile:

Mike, thank you for your reply.

That’s what I’ve tried but didn’t work for me. Here is a small illustration to explain better what I’m trying to achieve!

Screen Shot 2020-10-05 at 4.32.53 PM|250x500 .

The point for the right column to be 500vh because I have triggers there to animate the content inside the card on scrolling.

I don’t know why, but I can’t view this file. Can you upload screenshoot here?

Ok, it worked. :slight_smile: If I understand you correctly, do you want the right section to animate while scrolling? If so, set the animation on the left section (let the left section be the trigger), and in the animation itself you can animate what is in the right section. If you leave 500vh, the left section would also have to be exactly 500vh, but it will be much better to adjust to the content - it will be easier to set the responsiveness.

Here’s a video of how it works with the hight set to auto and an animation triggered by the left section and animated by the right section.

Let me know if it helps :slight_smile:

Thank you for your time, Mike!

I was not specific about the animation of the right part. The goal is to make it sticky and animate content INSIDE card when the trigger scroll into view. And the left part will be scroll much faster than all content inside the right card. Here is the updated version where I fixed the left side to the bottom. But in that case, it stays still at first and starts to scroll at the bottom. What I’m trying to achieve — left side scrolls when in view, right side changes images inside the card on a scroll by triggers AND I want is to stop the left side when it reaches the end but the right side will continue changing images a little bit longer while scrolling.

Hope I could explain a little more solid than before :smile:

https://preview.webflow.com/preview/scroll-tests?utm_medium=preview_link&utm_source=designer&utm_content=scroll-tests&preview=96a4c62e25733e38d94ba2b757320d8b&mode=preview

I have few ideas, I’ll try it tomorrow and let you know :wink:

1 Like

Thanks a million! I’ll experiment with it as well.

Hi,
Sorry, I didn’t have time yesterday to work on this as promised. Fortunately, today I was able to jump into webflow and test the idea. It works.
Hope that’s what you meant and helped :slight_smile:

Mike, that is exactly what I need! Thanks a million!

I’m glad that I could help :slight_smile: