Axure 7 added the wonderful and tremendously useful OnWindowScroll event to page interactions. Unfortunately, it doesn’t include direction like OnScrollUp or OnScrollDown . An event like this is super useful because you can use it to show a sticky header, like in this example jquery plugin, headroom.js. I’ll walk through the steps and then explain the logic. Example link: http://wires.glucasroe.com/VSHYD6

1. Build your content

Before adding your interactivity, build your content. It’s a grand idea, trust me.

Here’s my sample prototype:

2. Pin the header to the browser

Convert all of your header to a dynamic panel and pin it to the browser. Make sure your header is in front of all your other content or you’ll get a display bug.

3. Create and set a windowScroll variable

In your Page Interactions (If you don’t see these, go to View > Panes > Page Properties and click the center tab), double click OnWindowScroll . First, add in a Wait action (I use 100ms, I’ll explain why later). Then we’ll need to set set a windowScroll variable to [[window.scrollY]] . Here’s a quick walkthrough.

4. Hide the header onScrollDown

Add a new case, put in the conditional if [[windowScroll + 10]] is less than [[Window.scrollY]] and have it hide header slide up . Right click the case after you have set it up and toggle If/Else if. Screencast!

5. Show the header onScrollUp

Add a new case, put in the conditional if [[windowScroll - 10]] is greater than [[Window.scrollY]] and have it show header slide down . This is basically the exact opposite of what you did for onScrolldown. Here’s what it should look like when you’re done

What’s happening here?

The first event sets a value, but only after a brief delay. See what happens on the example URL if you open the variables panel in the left sidebar and scroll.

After a value is set (after initial scroll), on a subsequent scroll it holds the value briefly before resetting it. Comparing this value to the current scroll position allows you to determine scroll direction and then sets it again for the next time scrolling stops.

The additions to the variable value in the comparisons section gives you your tolerances. This prevents the functions from firing too easily as scrolling stops, especially if you’re using a trackpad.