Hi dafelara!
I’ve taken a look through your project file, and it looks like the reason the pinned carousel is not showing as the page scrolls is because of some of the conditional logic used for your page-level OnWindowScroll events. The first, “Case 1” event is set to fire when the “D - Carousel” widget is over the are of the “D - Top” widget. However, since the “D - Top” widget uses a static location, this interaction is not able to fire, so the “D - Carousel Fixed” widget is not given the opportunity to be shown.
Instead of using conditional logic that checks whether a widget is over the area of another widget, I would recommend using conditional logic that checks the Window.scrollY
value, as described in our Scroll-Activated Sticky Header tutorial. Using these type of conditional logic values, you can have the pinned carousel and static carousel show or hide depending on the scrolling value:
“Case 2” uses two values to check if the window scroll is less than 153 (the Y cooridinates for the “D - Carousel” widget) or is greater than or equal to 240. The value 240 is a placeholder value, that could be modified depending on when you would want the pinned carousel to hide again. I gathered this placeholder value by reviewing at which point during scrolling the pinned carousel begins to overlap with the paragraph widget underneath the accordions.
“Case 1” is an “Else If” case, which means it fires whenever the conditions for “Case 2” are not met. So, when the Window.scrollY value is between 153 and 239, this interaction will fire and the pinned carousel will display on the page.
fixed carousel-edited.rp (83.4 KB)
I hope this helps!