Help to combine Sticky element & Horizontal scroll (overflow)

Design help Animations & Interactions
1

Hello webflow community,

I’m struggling to combine sticky elements and horizontal scroll on my portfolio.
To be more specific, I’m facing 2 issues:

  1. There is an overflow on my website since I’m using sticky elements (can’t combine both). Do you have any hacks for it?
  2. Apart from the overflow issue, the horizontal scroll works fine in my website builder. As soon as I upload it and check in on Chrome, the sticky effect doesn’t work anymore, so the overall effect is horrible.

Feel free to help and share your hacks for these issues :pray:

Have a good day!

Jessy

Here is my read-only link: https://preview.webflow.com/preview/jessypage-com?utm_medium=preview_link&utm_source=designer&utm_content=jessypage-com&preview=f87dcd18e9ee1ac39a97c532653141d4&mode=preview

2

I don’t know if that can be helpful but I made a free template that’s horizontal scrolling with sticky http://horizontal-scrolling-sticky-section.webflow.io/

You can clone it.

3

Hello Vincent, thank you for your super fast answer and help.
I’ve implemented your section on my website. The scroll & sticky effect works but the overflow is still on.
Do you have any idea of where it could come from?

Jessy

4

@Jessypage you may have one of the sections with overflow “auto”, check the parent containers of the scroll & sticky feature.

5

Hello Carlos, thank you for your answer.
Putting overflow off on the parents elements break the stickiness…

6

@vincent my bad, the effect still doesn’t work when online…
Do you have any idea of what it is due to?

7

Hi, thank you for your clonable free template, it helped me a lot to understand how to do it myself. Would you have an idea about how to do the same animation, but with a sticky or fixed bloc on the left of the horizontal scrollable section? Just like here : Our Work | Executive | A Digital Branding Agency but with the heading “fixed”. Thank you a lot, can talk in french if you prefer :wink: