Scrolling long article inside a section

Design help Animations & Interactions
1

Hello all, I have been trying to use a scroll animation to achieve a section where the left side image (which is 100% height of the section) will stick as the user scrolls and the right side article (longer that the height of the section, overflow hidden) can continue to be scrolled until user reached the bottom of the article then section will unstick. Any help much appreciated. Thanks

https://scroll-long-article-example.webflow.io/

https://preview.webflow.com/preview/scroll-long-article-example?utm_medium=preview_link&utm_source=dashboard&utm_content=scroll-long-article-example&preview=bc7a1af27d44ae39fea2e4ecf475ff14&mode=preview

Here is my public share link: https://scroll-long-article-example.webflow.io/

2

Welcome to the community!

This is a situation where you can get away with using position: sticky alone without any interactions, and thankfully you just need to modify a few styles to get it working:

3

Thanks for the quick and helpful answer!

4

Hey @mikeyevin - would this solution work if you wanted to add a 100vw footer section below the image and article? That way, when reaching the bottom of the article, the image and article would unstick and move upward to reveal the footer section.

5

Yep! Essentially the element only sticks when it has room within its “track” (the vertical space it can occupy) so once it reaches the bottom it will stop sticking and scroll normally :+1:

6

Awesome, got it to work. Thank you!

7

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.