Axure教程:顶部导航跟随页面滚动

1 评论 7791 浏览 21 收藏 3 分钟
🔗 B端产品经理要负责对竞品进行分析和评估,了解竞品的走向、功能、卖点、优劣势等,制定产品的策略和方向

当页面往下滚动时,导航跟随页面一起,点击右侧图标可直接返回顶部。那这个效果是如何实现的呢,一起来文中看看~

如下图:

顶部导航跟随页面滚动

顶部导航跟随页面滚动

线上效果图,查看:顶部导航跟随滚动

制作方法

1. 添加导航与页面

按平时制作导航与页面的方式制定,无需设置任何交互效果,但为了看到页面效果,页面建议添加长页面,才可出现滚动。

2. 添加滚动图标

添加滚动图标,并设置为隐藏。

顶部导航跟随页面滚动

滚动图标

针对图标做交互操作,设置为摇摆,时间为500。

顶部导航跟随页面滚动

图标交互

3. 添加热区

添加一个热区,并放置与菜单同坐标值位置。

顶部导航跟随页面滚动

热区

4、页面窗口滚动交互

在页面添加窗口滚动交互,添加用例

顶部导航跟随页面滚动

窗口滚动交互

添加用例一,移动导航,设置为绝对位置,x值为[[Target.x]],y值为[[Window.scrollY]]。

顶部导航跟随页面滚动

用例1

添加用例二,添加条件,设置值>10,显示滚动图标,动画逐渐500s。

顶部导航跟随页面滚动

用例2

设置用例三,设置滚动图标隐藏,动画逐渐500s。

顶部导航跟随页面滚动

用例3

 

本文由 @ 五百英里 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于CC0协议

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 动态面板固定到浏览器顶部功能了解下 😳

    来自广东 回复
专题
19278人已学习15篇文章
表单是我们比较常见的一个信息录入工具。本专题的文章提供了表单设计指南。
专题
70778人已学习13篇文章
什么是产品的商业模式,不同类型的产品在商业模式上有什么区别?
专题
13569人已学习12篇文章
随着“新基建”的号角,新技术不断涌现,数字化转型成了成了大多数企业的迫切需求。本专题的文章分享了如何做服务数字化转型。
专题
14304人已学习12篇文章
人力资源管理系统,帮助企业管理和维护其人力资源。本专题的文章分享了人力资源管理系统的设计指南。
专题
15136人已学习14篇文章
BI的核心价值在于满足企业不同人群对数据查询、分析和探索的需求,从而帮助企业更好的管理与决策。本专题的文章分享了BI系统概述。