Fixed-position menus are often used on websites or applications today. They allow the menu (or any other toolbar) to remain always visible on top of the screen, no matter how far the users scrolls down. This interaction allows to create higher pages, without worrying about the user getting lost in the sitemap or worrying about finding the navigation again. Axure offers great interaction programming possibilities. And guess what? It is possible to prototype a fixed position menu with Axure, which only sticks to the top when relevant. Here is a ste-by-step tutorial to create a fixed position Axure element, including Axure source and prototype demo on Axshare.

I won’t say it’s simple, but this tutorial should give you a hand. The idea is to use 2 versions of the menu: one standard, and one set as Pin-to-browser on top left. We switch from one version to the other according to scroll, using 2 fixed-position Hot spots to define areas. It definitely gives a wow-effect to any presentation! Ready?

View the HTML prototype demo or download Axure source example

Before we start, make sure you are familiar with Hot spots and Pin-to-browser (available on a right click on a Dynamic panel.)

1. Let’s assume you have created a page, and want the menu to become fixed-position, but only when the scroll makes it relevant. (Often the menu is not on the top left of the page, which would be too easy.)
2. First, select the elements you want fixed-position (ideally, it should be a horizontal full-width band.) and convert it as a Dynamic panel (that you could name, for example, Fixed position menu – Default.)
3. Copy this newly created Dynamic panel. Rename it, for example, Fixed position menu – Fixed and place it at the top left of your interface. With a right click, select Pin to browser (0,0). Then Set it Hidden.
4. Place a very thin (2 pixels) Hot spot at the top left of your interface. Name it, for example, Top. Then convert it to a Dynamic panel, and name it, for example, Top mark. With a right click, select Pin to browser (0,0).
5. Copy this newly created Dynamic panel. Rename it, for example, Menu bottom mark, and rename Hot spot, for example, Menu bottom. Then position this second Dynamic panel exactly y pixels under the first Hot spot, y being exactly the height of your Fixed position menu Dynamic panel.
6. The idea is now that, when user scrolls down, and as soon as your menu hits the top, we want to show the Pinned-to-browser version of the menu (so we hide the Default Dynamic panel, and show the Fixed one instead.) And when user scrolls up, as soon as menu gets to its original place, get back to the Default menu. To do that, just copy the code as in the image below in the Page interactions / OnWindowScroll. OnWindowScroll, if area of menu 1 is over area of Hot spot 1, then hide menu 1 and show menu 2; if area of menu 1 is over area of Hot spot 2, then hide menu 2.