This article accepts the use of dynamic panels and hot zones in Axure to make menu scrolling and switching interactive
effect
preview URL: https://u5ircj.axshare.com
Function
Scrolling the page to a content section displays its corresponding menu.
Production
1. Required components
Rectangle, dynamic panel, hot zone
2. Production process
Drag a rectangular component, set its size to 1000×92, name it "Navigation" and
drag a dynamic panel on the left side of the navigation, set its size to 150 ×85, name it "menu", as shown in the figure:
Enter the dynamic panel, drag in three rectangles with a size of 150×29, and name them "mobile phone", "computer", and "home appliance" respectively (consistent with the content of the page), As shown in the figure:
Set the dynamic panel as hidden
Drag three hot zones and three rectangles under "Navigation", which are mobile phones, computers, and home appliances. The height of the three hot zones is consistent with the relevant content. At the end, the last menu can be reflected), as shown in the figure:
The final design, as shown in the figure:
Interaction
When the window scrolls, the interaction settings are as follows:
if the area is in the menu contact area and the mobile phone, the selected state of the "Mobile" menu is true, as shown in the figure:
If the area is in the menu contact area with the home appliance, the selected state of the "Home Appliance" menu is true, as shown in the figure:
If the area in touch with the menu is in the computer, the selected state of the "Computer" menu is true, as shown in the figure:
if "[[Window.scrollY]]" > "50", gradually display the menu, as shown in the figure:
if "[[Window.scrollY]]" < "50", gradually hide the menu, as shown in the figure:
