Sticky Content + Horizontal Scroll + Sticky Content

[EdwinSana]

Hello. Please, I would like your help with this question:

 

1. I have a series of boxes called "container" which have inside them a sticky element called "element_sticky" that is sticky according to the height of its parent, which is "container". There is also an element that is not sticky, that is, it should scroll vertically normally, called "element_nosticky".

 

2. I have a box called "containerGal" which has horizontal scrolling.

 

I have the following problem: I have a gallery that scrolls horizontally and after it comes another "container" box with a sticky element inside it. When I'm scrolling horizontally through the gallery the sticky element of the next "container" box overlaps the horizontal gallery. It is as if the sticky action was performed before the gallery finished its horizontal scrolling completely and then continued with the vertical scrolling.

 

Thanks for the help!

See the Pen LYrGmVL by EdwinSanabria (@EdwinSanabria) on CodePen

[GreenSock]

It looks to me like you're creating your ScrollTriggers out of order and you never used a refreshPriority to tell ScrollTrigger the proper order. You should ALWAYS create ScrollTriggers in the order they occur (top to bottom) but if for some reason you can't, you should define a refreshPriority so that ScrollTriggers knows what order to calculate things in. 

 

Technically, in your case since there's little ambiguity, you can probably get away with just calling ScrollTrigger.sort() after you create them all: 

See the Pen GRGoGOJ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I'd also recommend making your dynamic end value (the one that's based on the height of the container) into a function-based value so that it gets recalculated anytime there's a resize/refresh (as shown in the demo above)

[EdwinSana]

Hi Jack.

That is the solution I was looking for. Thanks for the advices, I'll look for more information about "refreshPriority" then.

Thank you for your quick and detailed response!