Axure怎么制作页面滚动时菜单滚动至顶部后固定固定在顶部的

来源：蜘蛛抓取(WebSpider) 时间：2017-03-09 13:58 标签： axure 滚动到顶部
大家先来看一个效果图，思考一下这个效果怎么实现？
首先，移动端内容的上下滑动，只需要将相应内容放入动态面板，并在该动态面板属性中添加垂直滚动条即可。这样，当我们在手机上打开原型时，即可通过手指的拖动而上下滑动。动态面板的滚动条必须设置，但在手机浏览器中并不会出现滚动条。
注意，全屏内容上下滑动，需要将动态面板设置为标准尺寸（见图2），并在HTML设置中进行【移动设备】设置，勾选【包含视口标签】选项（见图3）。
然后，我们分析一下这个效果的交互过程。
1、交互什么时候触发？
答：动态面板内容滚动的时候。
2、分别有几种情形？
答：两种情形，一种是内容滚动超过指定的距离，一种是未超过指定的距离。
3、需要判断什么内容？
答：需要判断动态面板内容滚动的距离。
4、动态面板内容的滚动距离怎么获取？
答：通过系统变量“scrollY”。
好了，分析完毕，下面是实现过程。
先准备元件。
页面中放入元件内容。分别是1个广告图片，3个制作菜单的矩形，N个三级标题和文本段落。把3个制作菜单的矩形，按着Ctrl键依次点击选中，然后，点击上方功能区中的【组合】图标或者快捷键&Ctrl+G&组合到一起，并命名为“MenuGroup”。最后，全选这些内容，点击鼠标右键，在菜单中选择【转换为动态面板】。（图4）
补充：转换为动态面板后，要把动态面板设置成上方提到的尺寸，例如360*640，并且，动态面板动态面板里面的内容超过动态面板的高度，否则不会出现滚动条。
2、在动态面板的属性中，设置动态面板【自动显示垂直滚动条】。（图5）
3、为动态面板添加交互。（图5）
一共包含2个用例（Case）：
用例1：对动态面板滚动距离是否超过150进行判断，设置条件【值】【[[This.scrollY]]】【&=】【值】【150】。系统变量“This”表示当前元件，“scrollY”表示滚动距离。（图6）
当符合以上条件时，我们需要【移动】菜单“MenuGroup”,【到达】x轴“0”/y轴“[[This.scrollY]]”的位置。“[[This.scrollY]]”就是动态面板内容滚动的距离，也就是动态面板内容滚动时，上边缘那一线内容的y轴坐标位置。在动态面板内容滚动时，将菜单“MenuGroup”移动到这个位置，就是将它时时移动到动态面板上边缘的位置，也就是顶部吸附效果。（图7）
用例2：当不符合用例1的条件时，也就是动态面板内容的滚动距离小于150的时候，我们需要再填加一个用例2，即不符合条件的情形，并设置动作【移动】菜单“MenuGroup”,【到达】x轴“0”/y轴“150”的初始位置。
以上就是移动端菜单顶部吸附效果实现的分析与过程。大家不难发现，其实使用变量与函数并不复杂，关键在与知道函数的用途与使用方法。这些系统变量与函数的使用方法，在我编撰的一系列图书中（例如：Axure RP8实战手册）都有详细的讲解，大家可以阅读参考。
所以，原型中使用函数，旨在解决问题和提高效率，不要刻意去使用，也不要对其有偏见而放弃使用。
源文件下载地址：
~~~~~~~~~~~~
~~~~~~~~~~~~
小楼老师再出新作，倾力打造Axure RP 8精品课程系列，以最短的时间高效完成学习目标，入门进阶与实战案例并重，是0基础的新手从入门到精通的必备课程。
《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------
《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------
转载请注明： &
or分享 (0)查看: 6365|回复: 5
网页下拉一定距离后，顶部出现悬浮的固定栏怎么做啊
主题帖子积分
类似于freelancer这个网站的，，求大神教教我
主题帖子积分
这个交互效果也困扰我多时&&同求& &说开了就是有没有滚动鼠标中轮的出发事件&&或是模拟这种触发事件的效果
主题帖子积分
用Axure7.0制作窗口滚动中固定在顶部的导航栏
，，，，，
主题帖子积分
亲&&如果顶部的浮窗是一直显示的&&很好实现&&但是你做的这种&&触发事件我做成鼠标移入&&鼠标移出都会存在bug
右键点击编辑动态面板 ——固定到浏览器 ——设定好位置
主题帖子积分
我上次看到一个“顶部导航”也是这样，在滚动下拉时，导航也是一样浮动在那里。这个可以实现吧？？？
拒绝驯化，拒绝平庸。没有好的创意就去死吧！我的博客：/79seo
主题帖子积分
可以的吧，把要固定的部分变成动态面板，然后右键选择固定到浏览器，最后调整位置就可以了。
将你的会员名、UID号，你的姓名、所在公司， 发送到管理员尹广磊的邮
Powered by写文章不容易，打个赏支持下作者吧|赞赏2人打赏
收藏已收藏 | 60赞 | 13
分享到微信扫码分享到微信
Axure原型设计工场，欢迎关注
25 篇作品36 万阅读总量
热门问题12345678910写文章不容易，打个赏支持下作者吧|赞赏3人打赏
收藏已收藏 | 25赞 | 6
分享到微信扫码分享到微信
1 篇作品4888阅读总量
热门问题12345678910

我要回帖

更多关于 axure 滚动到顶部 的文章

 

随机推荐