Horizontal scrolling element not sticky

Design help Animations & Interactions
1

Hi all,

While trying create horizontal scrolling on a section, I followed this example: Creating horizontal scrolling | Webflow Blog
I compared to the dummy website and found no differences whatsoever.

Observed Issue: It keeps scrolling up->down while horizontal scroll happens too. It feels like the sticky css has no effect. So the track works fine but won’t stay to the middle of the screen when fully visible.

A little help would be highly appreciated.

Here is my public share link: https://preview.webflow.com/preview/momentis-lab-round-1?preview=7a60fd235e2ef5c08a1f11ca5dd734cb

2

Hey @dylan_demnard

I noticed that the demo uses the following code:

<style>
.gallery-container {
   position: -webkit-sticky !important;
   position: sticky !important;
}
</style>

Notice the !important tag, this will ensure that position:sticky takes precedence. I suspect this will solve it for you. Let me know if it doesn’t.

Hope this helps. Happy designing!

3

Hi @matthewpmunger,
Thanks for checking it out. I forgot to put the code back to the original as I was trying different codes. I have just put the code as shown but it still does not work.
I have tried it on different pages too, to no avail…

4

:thinking: Hey @Aaron do you have any ideas why this isn’t functioning?

@dylan_demnard Can you please provide the published link too? It might help to inspect the code.

1 Like
6

Yes here it is: http://momentis-lab-round-1.webflow.io/
Thank you for looking into it!!

7

Hey, I’ll crack this open and take a look :slight_smile:

1 Like
8

Hey,

I’ve a similar “sticky” issue also. I’ve created a separate post on the forum for it

Any help would be greatly appreciated.

9

@dylan_demnard sorry for the delay in the help, it’s because you have the body wrapper of “Full Content” set to “overflow:hidden” position sticky does not work when one of the parent containers has overflow:hidden on, it must be visible.

Screenshot_1
Screenshot_11365×636 243 KB

Best, Aaron.

2 Likes
10

@Aaron Don’t worry for the “delay”, your help is soooo appreciated! Thank you so much, it now “sticks”! Thank you so much for your help.
Thank you @matthewpmunger for helping too!
Best

Dylan

2 Likes
11

You’re welcome! Glad it’s fixed :smile:

12

Hey mate, you might want to check the solution which worked for me. Check that any parent of your horizontal scroll element is not “hidden”.
Hope it resolves your issue too!
Cheers

@Diarmuid_Sexton

13

Hi @dylan_demnard

Thanks for the tip but it didn’t work for me. I’ll keep trying.

14

@Aaron
One thing though that I am trying to debug (but my webflow proficiency is not as sharp as yours) is that the horizontal scroll starts only when it exits the element. So it does not “Starts when fully visible” but rather
starts at 0% “when exiting”…
Would you have an idea of what causes this?
http://momentis-lab-round-1.webflow.io/

15

Hi @Aaron,
I just can’t figure this out now… A mentioned above, it keeps on scrolling once the gallery exits the view port…But it does not scroll when the gallery is fully visible. Do you have an Idea?
Thanks