Show/Hide dynamic panel when window stops scrolling

Building a prototype that has a Material Design-style FAB in a dynamic panel, pinned to the bottom right of the screen.

What I’m trying to achieve is:

  1. OnPageLoad, FAB is visible
  2. If the user scrolls vertically, I want the FAB to hide
  3. When the user stops scrolling, I want the FAB to show again

Obviously there is no OnWindowScrollStop (yes please Axure!). I’d imagine there is some sort of listening event using Move(0,0). I’m looking to derive a value for the rate of change in Window.ScrollY so that if the rate is above 0, the FAB hides, but if it is 0, the FAB shows.

I’m not sure how to derive the mathematical expression to work out the rate of change. Any help would be much appreciated!

UPDATE: onWindowScroll, Hide FAB, Wait 1000ms, Show FAB.

It’s pretty dirty, I don’t like using arbitrary Wait commands, but will do if no other solution is possible

Hi @WalleyeUk,

I have a similary solution:
Hide_when_scrolled.rp (47.4 KB)

  • On WindowScroll hide dynamic panel
  • On the dynamic panel, OnHide wait a time (1s) and then show

I find the result not so bad.

Best,

Hi!

I don’t like using Wait because there is no mechanism for cancelling it, which often brings up a rash of bugs. While this solution isn’t gorgeous, it gives you a delay that you can cancel.

Create a dynamic panel named fab_shower with State1 through State10. Give it an OnPanelStateChange handler like this.

OnPanelStateChange
   if State of fab_shower is State10 (the last state)
      show FAB

Then, in OnWindowScroll, you would do this

OnWindowScroll
   hide FAB
   set fab_shower to Stop Repeating
   set fab_shower to State1
   set fab_shower to Next repeat every 30ms delay first change

That way, for every OnScroll message, fab_shower is prevented from reaching its last state (which triggers showing of FAB; see above) because its next/repeat process is cancelled and it’s reset to State1. But once the window stops scrolling for 10 x 30ms, fab_shower will reach that last state and trigger showing of FAB.

Sample: hide-fab-on-scroll.rp (63.6 KB)