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.

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.

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

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.

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

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

Interactions Setup

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.