本文内容适合初三Axure学生学习。Axure masters有更快的方法来达到这种效果。欢迎评论留言一起交流学习~
背景
相信大家在工作中也遇到过这样的难题,绞尽脑汁,尝试了N种方法,还是没能做出非常流畅的悬浮效果。
笔者曾经遇到过这样的难题。今天我就带领大家一起研究解决这个难题。
这是一个什么难题?
请看下图:
网站头部,全站导航;页面滑动的时候是抬起来的,悬顶的效果很好;把网站头和整个导航放在动态模板外面或者把网站头和整个导航放在动态面板里面,固定在浏览器中间上方。
但是页面下滑时,如果需要将频道导航提起,悬浮至置顶效果该怎么做呢?
这样的效果现在在网站上随处可见,比如:36Kr、不凡商业、钛媒体等。都是利用这种交互效果来展现频道分类,方便用户点击,降低用户的学习成本。
效果该怎么实现?
步骤1:建模块
我们创建了三个新的部分,即名称标题、广告和频道导航。
别光看,我们一起练吧~
步骤2:起名字,后便找
选择盘子后,写下每个盘子的名字。
步骤3:配置判断条件
前提:不要用鼠标选择任何盘子。如果您选择了头板,请单击背景以取消对该板的选择。
点击右边的窗口进行滚动。
点击添加条件,进入条件配置页面。
选择数值。
单击fx,然后单击插入变量或函数,最
后鼠标往下滑到窗口处,选择Window.scrollY,确认。
⑤回到条件配置页面,点击+号旁边的fX按钮&Axure教程gt;然后点击添加区域变数>选择元件>选择广告,确认。
⑥回到条件配置axure是什么软件页面,选择大于。
解释:刚刚我们设置的是,当窗口滚动时,向下所滚动的距离大于广告板块高度的值条件。
步骤4:添加频道导航提起案例
条件设定好后,点击确认。
①找到移动并点击它>然axure怎么转换为中文版后选择频道导航>最Axure后移动axure基础教程选框中选择“到达”。
②以Axure设计上操作完成后,点击y处的fx>然后点击插入变量或函数>最后选择axure官网Waxure原型设计indow.saxure基础教程crollY,点击确认。
解释:
- 步骤3中,当窗口滚动时,向下所滚动的距离大axure基础教程于广告板块高度的值。
- 步骤4中,移动频道导航,到达坐标X0,Y窗口滚动的起点axure基础教程,也就是顶部位置。
频道导航提起,悬浮至置顶效果大功告成。axure怎么读
注意点:
- 频道导航板块别忘了置顶,不置顶提起悬浮时会被其它板块盖住。
- 练习时,请在频道板块下面增加点内容,随便打点字,页面展示区大于1屏才有向下滚动的效果。
频道导航如何回到自己位置上?
刚刚完成了,当窗口滚动时,向下所滚动的距离大于广告板块高度的值。移动频道导航,到顶部位置提起,浮动。
步骤1:新建案axure和墨刀的区别例名称
可以将刚刚做好的案例复制,粘贴生成一份新的案例。也可重新编辑一份新的案例,为了节省时间我就复制,粘贴生成一份新的案例。
步骤2:编辑条件
按刚刚教您的步骤,进入条件设立板块,别的都不要动,将大于改成小于即可。
解释:刚刚我们设置的是:当窗口滚动时,向上向下所滚动的距离小于广告板块高度的值条件。
步骤3:频道导航回城案例
①选中,Axure设计频axure基础教程道导航,记住Y轴坐标值。
②点开案例,将记住的Y轴坐Axure设计标值填充到Y字段。
解释:
- 案例2:当窗口滚动时,向上向下所滚动的距离小于广告板块高度的值时。
- 案例3:移动频道导航axure和墨刀的区别,到达坐标X0,Y220的位axure怎么读置Axure教程(自己起始位置)。