Axure教程：导航栏如何根据滚动条同步选中（热区的使用）

现在网页使用滚动条展示信息的场景越来越多，但是信息条太长会让用户感觉不知道滚动到什么位置了，对网站架构不太清楚，也不能快速定位到自己需要看到的信息，由此引入滚动条与导航栏关联同步的功能，比如京东商城PC端、天猫PC端等等。

去年我也整理过关于实现此功能的文章，但是现在觉得之前的实现方案不太方便快捷，今天我将引入热区元件来实现导航栏与滚动条同步选中的功能。

效果如下：

01 热区

热区的用途非常灵活，使用示例：

• 使用热区元件来区分一个图片中的不同交互区域。在图片的不同区域上添加热区元件，这样就可以给这些区域添加交互了；
• 如果锚点链接需要定位到一个没有元件的位置，那么热区元件可以作为其定位目标。（比如高于元件的一个空白区域）

今天我要使用的是第二个功能，将热区作为定位目标

02 元件的使用

• 热区：放在相应的位置，用户标识内容块的起始位置；
• 矩形：用于放置内容块信息；
• 动态面板：用户设置导航栏；

页面使用的元件情况入下图：

03 交互设置

1. 导航栏

（1）设置导航栏动态面板为固定到浏览器；

（2）将所有导航菜单添加到同一个选项组；

（3）导航菜单均设置：“鼠标点击”导航菜单事件，事件内容为：“滚动元件”到对应的热区；

2. 设置页面“窗体滚动”事件

设置思路：

窗体滚动时，

当窗体.Y坐标>=热区1.Y时，选中内容1对应的导航菜单；

当窗体.Y>=热区1.Y且窗体.Y<热区2.Y时，选中内容2对应的导航菜单；

…

依此内推；

设置完成后的内容为下图：

是不是很方便、快捷？

本文作者 @恋

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！