Axure制作移动端菜单顶部吸附效果教程

大家先来看一个效果图,思考一下这个效果怎么实现?移动端菜单顶部吸附效果

步骤:

1、页面中首页放入手机壳图片,在手机上面放入元件内容。    导航栏滚动在首页不需滚动,下面内容是滚动显示(分别是轮播图、门店位置切换、功能标签组合、精选项目组合等)。把需要悬浮的标签【组合】图标或者快捷键组合到一起,并命名为“品相分类”。最后,全选页面滚动内容,点击鼠标右键,在菜单中选择【转换为动态面板】。

2、在动态面板的属性中,设置动态面板【自动显示垂直滚动条】。另外动态面板的高度不能超过手机内部高度。

3、为动态面板添加交互。一共包含2个用例(Case):

用例1:对动态面板滚动距离是否超过 “品相分类的y”(滚动到菜单顶部组合)进行判断,设置条件【值】【[[This.scrollY]]】【>=】【值】【品相分类的y】。系统变量“This”表示当前元件,“scrollY”表示滚动距离。

当符合以上条件时,我们需要【移动】菜单“品相分类”,【到达】x轴“0”/y轴“[[This.scrollY]]”的位置。“[[This.scrollY]]”就是动态面板内容滚动的距离,也就是动态面板内容滚动时,上边缘那一线内容的y轴坐标位置。在动态面板内容滚动时,将菜单“品相分类”移动到这个位置,就是将它时时移动到动态面板上边缘的位置,也就是顶部吸附效果。

用例2:当不符合用例1的条件时,也就是动态面板内容的滚动距离小于【品相分类】的y值的时候,我们需要再填加一个用例2,即不符合条件的情形,并设置动作【移动】菜单“品相分类”,【到达】x轴“0”/y轴“【品相分类】的y”的初始位置。

如有不明白关注微信公众号“分享产品知识”,输入“Axure0528”,即可获取到源文件。