Sticky image carousel


#1

Hello,

I’ve read so many posts and tutorials but no one worked for my application.
I have a page with an image carousel and next to it a series of accordions with options inside. As the user opens the accordions and scrolls to view the options I want the image carousel to follow. Once the scroll is pass the accordions the carousel no longer scrolls and stays at its original position.
I attach my Axure file. Thank you in advance for your help. This has been driving me crazy.fixed carousel.rp (83.5 KB)


#2

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:

image

“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!