Scrollable Sticky Dynamic Panel


#1

Hello everyone,
I’m new to this forum but pretty old with Axure. Recently I had a task to do where I have to create a scrollable element that scroll with the main page within its own limits. Pretty hard to explain but I found an example at the below link:

https://abouolia.github.io/sticky-sidebar/examples/scrollable-element.html

As you can see, the pink - left column, gets sticky at the bottom of the window while scrolling down and sticky at the top of the window while scrolling up. It’s exactly what I need to do with my prototype.

Thanks in advance for your help,
Stefan


#3

This is fairly easy to do using the OnWindowScroll action in OnPageLoad. Show and hide things according to the Y value of a Window.scrollY action (contained in a conditional statement on the OnWindowScroll).

You need to have three versions of the thing you want to scroll in this case: two static on the canvas (one at the top of the page, and one at the bottom), and one hidden but with the “pinned” property turned on so that it tracks the scroll once Window.scrollY is between one of two values.

So, sort of: “When OnWindowScroll is greater than [n], show the sticky version of the column and hide the static top and bottom ones. And when OnWindowScroll is less than [n], hide the sticky version, and show the static one.” … kinda thing (depending on the Y scroll values).

BTW You may be able to make this slightly easier to do by putting “markers” on the canvas and change the OnWindowScroll to “when [Column] is over [Marker]” instead of using Y values.

:slight_smile:


closed #4

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.