Axure Tutorial: Makes Fixed Top Navigation
Introduction
Please note that this solution adopts the most concise and fast way, which is different from the implementation method in the existing articles. It solves the problem of the fixed effect in the middle of the page when the page scroll down. (App/web is applicable) Go directly to the tutorial.
Features to be implemented
1. When the page scrolls below the blue content, the fixed top navigation is shown.
2. When the page scrolls above the blue content, the fixed top navigation is hidden.
Page Setup
First set the page style to align the content to the left.
Widgets Setup
1. First make the top navigation, and then use the gray rectangle to make the content. Then use the blue rectangle below to make the content.
2. Copy a top navigation at the top of the blue content, Hide and name it Scrolled Bar.
3. Copy a top navigation and convert it into a dynamic panel. And pin it in the top left corner of the browser and name it Fixed Bar.
4. Drag in a hot spot and convert it into a dynamic panel, named Top Hot Spot and pinned in the upper left corner of the browser.
5. Drag a hot spot and cover it on the Scroll Bar in the middle. The height is extended to the height of the whole blue content, named Center Hot Spot.
Interactions Setup
We only need to set the interaction when the window scrolls. If the top hot area dynamic panel touches the bottom hot area, the Fixed Bar will be shown; otherwise, the Fixed Bar will be hidden.
That's all for today's lesson. If you have any questions and suggestions, please leave a message.
If you like the article, please share it with others with page link, thank you for your supporting! ❤
Note: Click here to download the completed RP file for this tutorial (RP 10 or up).
Well Joe @AxureBoutique, a technical writer and teacher, focuses on Axure prototype design and product design.
Leave a comment