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! ❤


Well Joe @AxureBoutique, a technical writer and teacher, focuses on Axure prototype design and product design.  


Leave a comment

Please note, comments must be approved before they are published

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.