Axure Tutorial: Select Nav Buttons According to Window Scrolling Positions

Introduction

Now there are more and more scenarios in which web pages use scrollbars to display content, but when the content is too long, users will not know where to scroll to, do not understand the page architecture, and can not quickly locate the information they need to view. This problem can be solved by associating the window scrollbar with the corresponding button on the nav bar.

Features to be Realized

1. When the window scrolls, if it scrolls to a certain position, the corresponding button on the right navigation bar will be selected.

2. When the button on the right is clicked, the window will scroll to the appropriate position.

How to Realize these Features 

Select Nav Buttons According to Window Scrolling  Positions

By adding hot spots to different parts of the page.

1. When the window scrolls, judge the ScrollY of window and the position of hot zone. Then select the corresponding button on the left navigation bar.

2. When clicking the button on the navigation bar, the window will scroll to the position of the corresponding hot zone.

Widgets Setup

Make Nav Bar Buttons

1. Drag 3 rectangles into the canvas. Set the styles and texts of the rectangles, and set MouseOver style and Selected style. Name the three rectangles Top, Limited and More respectively.

2. Select three buttons, right-click and set the selection group to Side.

Create Side Bar Dynamic Panel

3. Create three buttons as dynamic panels. Pin it to the right and middle of the browser.

Hot Spots Setup

4. Cover hot spots for different areas of the page. We cover three hotspots here, named 1, 2 and 3 respectively.

Interactions Setup

Page Scroll Interactions

1. Set when Window scrolled, if the Y coordinate of the scroll bar is less than the Y coordinate (top) of hot spot 2, select the Top button; If it is greater than or equal to the Y coordinate of hot spot 2 and less than the Y coordinate of hot spot 3, select the Limited button; If it is greater than the Y coordinate of hot spot 3, select the More button.

2. Set the same interaction when Page Loaded.

3. Select the button Top on the navigation bar, set the current button to be selected when the button is clicked, and scroll to the corresponding hot spot 1.

4. Set similar interactions for all buttons on the navigation bar.

In this way, all the settings are completed. If you have any questions and suggestions, please leave a message.

If you like the article, please share it with others with page link, thanks 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

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.