Axure教程:导航栏如何根据滚动条同步选中?

2020-01-01


本文给大家介绍的是导航栏如何根⿲据滚动条同步选中,一起来看看~

实现效果:选中导航栏中的菜单,窗口☼内容显示对应的内容;窗口滚动时,选中导航栏对应的菜单。

创建导〆航栏

(1)拖入动态面板,命名ⓥ“左ω侧导σ航栏

(3)右键“左侧导航栏”选Г中【固定到浏览器】

此步骤目的为,当滚动鼠标⿳时,左边导航栏不随之滚动。

(3)选中并打开动态面板“左侧导航栏”状态1,拖入三个У菜单按钮

分别命名“1”对应第一项,“2”对应第二项,“3▌”对应第三项╥,并设置鼠标ↀ按下和选中的交互效果。¨

为了让菜单保存单选中状态,将“1”、“2”、“3”加入同一个选项组。

创建导航栏对应的滚动内容

右侧编辑导航栏对应的滚动内容,当然内容还可以是组合等形式。

注意 :设Ω置页面引入时,默认选中第一项。

设置选中导ↂ۩航栏,右侧⿶滚动的◈相应的内容

当选中左侧菜单栏1时,右侧滚动内容显示到第一∝项;Π当▪选中左侧菜单栏2时,右侧滚动◙内容显示到第二项;当选中左侧菜单栏3时,右侧┘滚动内容显示到第三项∕。

(ρ1)选中导航栏“1”,设置交互事件“鼠标单击时”※,设置当前元件为“选中”状态

(2)设置“滚╬动到元件”→“ↈ第一项”

设置右侧滚动,导μ航栏选中相应υ菜∪单

第一项的内容处于∴浏览器窗口的上半部分,则选中导航栏的1菜单;

第二项的内容处于浏览器窗口的上半部分,则选中导航栏的2菜单;

第三项的内容处于浏览器窗§口的上半部分┏,则〣选中导航栏的3菜单。

(1۩)创建“页面”“窗口滚动时”交互事件,注意顺序,右侧元件,从下往上〓依次创建对应的滚动事件З

第一项的内容处于浏览器窗口的上半部分:

理解:浏览器中页面垂直滚动的距离+打开原型页面的浏览器当前高度/Ⅴ2>=第一项的Y轴时

浏览器中页面垂↹直滚动的距离+打开原型页面的浏览器当前高度/2=[[Wind∪ow.scrolЦlY+Window.heigh▷t/2]]

第一项的⿴Y轴值:

&۞۞nbsp;

本文由 @恋 原创发布于人人都是Ⅱ产品经理。未经许可,禁止转载

题图来自Unsplas۩h,基于CЁC∽0协议