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”，即可获取到源文件。