INTERNET APPLICATION DEVELOPMENT
MID MARKET ERP DEVELOPMENT
by Derek Du
In a previous post, as part of building a interactive navigation menu, I discussed how to detect the section the current view is in and highlight the corresponding navigation menu item. This post finishes the work by adding actions that make the navigation menu stay on top of the view.
First, let me start by saying that a new feature is recently added to Axure that can pin a dynamic panel to browser. Right click the panel and you will fine the option.
However, this keeps the same top margin between the panel and the top of the view. We want to only pin the panel in place when it is about to be out of the view. In other words, we want the panel to start moving along with the page when it is about to scroll out of the view.
So how do we know if the panel is about to scroll out of the view? This can be detected by checking whether the distance scrolled vertically is greater than the y position of the first horizontal line (our panel’s top edge aligns with the line). This will be the condition of our action.
When the page is scrolled past the first line, part of the panel will be out of the view. How do we pin it in the view instead? We just need to immediately move back in that outside part. We need to move the panel down by a distance that equals to the height of the part that is out of the view. The diagram below shows how we can calculate this distance. Scroll Y is how much has been scrolled. Panel’s Y value is the distance from the top of the page to the top edge of the panel. The difference between these 2 variables is the distance we need to move the panel down, so that the green part is back in the view.
Once we are clear on the approach, we can add a new action on the "OnWindowScroll" event that moves the panel back in when it scrolls out of the view. The Target here is the panel itself because we are moving it. It is a quick way to get a widget’s property.
Note that I added 20 pixels of top-margin at the end. It is not necessary. But if you added some margin, you need to remove the margin once the view is back to the initial position, so that the panel is also back to its initial position. I have another action that moves the panel back to its original position when the page scrolls back to top.
Here is a demo of the navigation menu. Hope this helps!
This blog post originally apeared in Derek's blog, Stuff.