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

　　首先，移动端内容的上下滑动，只需要将相应内容放入动态面板，并在该动态面板属性中添加垂直滚动条即可。这样，当我们在手机上打开原型时，即可通过手指的拖动而上下滑动。动态面板的滚动条必须设置，但在手机浏览器中并不会出现滚动条。

　　注意，全屏内容上下滑动，需要将动态面板设置为标准尺寸，并在HTML设置中进行【移动设备】设置，勾选【包含视口标签】选项。

　　然后，我们分析一下这个效果的交互过程。

　　1、交互什么时候触发?

　　答：动态面板内容滚动的时候。

　　2、分别有几种情形?

　　答：两种情形，一种是内容滚动超过指定的距离，一种是未超过指定的距离。

　　3、需要判断什么内容?

　　答：需要判断动态面板内容滚动的距离。

　　4、动态面板内容的滚动距离怎么获取?

　　答：通过系统变量“scrollY”。

　　好了，分析完毕，下面是实现过程。

　　先准备元件。

　　页面中放入元件内容。分别是1个广告图片，3个制作菜单的矩形，N个三级标题和文本段落。把3个制作菜单的矩形，按着Ctrl键依次点击选中，然后，点击上方功能区中的【组合】图标或者快捷键组合到一起，并命名为“MenuGroup”。*，全选这些内容，点击鼠标右键，在菜单中选择【转换为动态面板】。

　　2、在动态面板的属性中，设置动态面板【自动显示垂直滚动条】。

　　3、为动态面板添加交互。

　　一共包含2个用例(Case)：

　　用例1：对动态面板滚动距离是否超过150进行判断，设置条件【值】【[[This.scrollY]]】【>=】【值】【150】。系统变量“This”表示当前元件，“scrollY”表示滚动距离。

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

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

　　以上就是移动端菜单顶部吸附效果实现的分析与过程。大家不难发现，其实使用变量与函数并不复杂，关键在与知道函数的用途与使用方法。

　　所以，原型中使用函数，旨在解决问题和提高效率，不要刻意去使用，也不要对其有偏见而放弃使用。

　　贵阳航洋动漫职业学校是贵阳市教育局批准(贵阳市教[2010]15号)设立的跨专业(包含计算机平面设计、动漫与游戏制作、影像与影视技术、绘画等专业)、多门类、全日制中等专业职业学校，同时也是一所实行准军事化管理的学校。