axure拖动页面_Axure制作移动端菜单顶部吸附效果教程

大家先来看一个效果图，思考一下这个效果怎么实现？

图1

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

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

图2

图3

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

1、交互什么时候触发？

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

2、分别有几种情形？

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

3、需要判断什么内容？

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

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

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

好了，分析完毕，下面是实现过程。先准备元件。

页面中放入元件内容。分别是1个广告图片，3个制作菜单的矩形，N个三级标题和文本段落。把3个制作