EdwinSana Posted November 1, 2022 Share Posted November 1, 2022 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 Link to comment Share on other sites More sharing options...
Solution GreenSock Posted November 1, 2022 Solution Share Posted November 1, 2022 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) 1 Link to comment Share on other sites More sharing options...
EdwinSana Posted November 1, 2022 Author Share Posted November 1, 2022 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! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now