Sticky on scroll until Y position


#1

I would like to mimic the desktop interaction of the Bloomindales Product Detail Page. I did something similar years ago with Axure 7 but have since lost the rp file and the knowledge. :frowning:

I have searched the forums here and onlineā€¦ found some that weā€™re close but the conditional logic is a little above my brain capacity.

Basically I need a dynamic panel to scroll WITH the page but only between certain Y positions.

scroll-n-stop.rp (63.3 KB)

Help would be greatly appreciated.


#2

Have a look at the attached. Youā€™ll put your logic on the ā€œOnWindowScrollā€ event and move the dynamic panel to the maximum of the window scroll and the current position.

scroll-n-stop.rp (61.8 KB)


#3

This is the part I (sort of) remembered! Thank you!

How about picking back up an another position? Would I use the ā€œboundariesā€ of the Move case? Or will I need to move it all to an If/Else Condition?

I would like the panel to continue scrolling with the page after the bottom hits around 1200px Y.


#4

The boundary should work. In the example I posted, setting a bottom boundary of <=800 is pretty close to what you said. Itā€™s basically saying move it until the bottom is at 800 pixels. At that point it will scroll off the screen. Using 1200 nothing happens based on the content of the page.


#5

Great, that helped a lot.
Just in case someone needs it: If you have a sticky navigation bar on top of it and you want your elements to stop scrolling below it (and not on the very top of the browser window) just add the height of the navigation bar to your Window.scrollY variable just like this: [[Math.max(Window.scrollY**+60**,140)]].

And a little bug fix for Axure 10: The whole thing doesnā€™t work if you define a maximum height for your canvas in ā€œPage Dimensionsā€.