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

访客4年前黑客工具887

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

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

如下图:

顶部导航跟随页面滚动

顶部导航跟随页面滚动

线上效果图,查看:

*** *** 1. 添加导航与页面

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

2. 添加滚动图标

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

顶部导航跟随页面滚动

滚动图标

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

顶部导航跟随页面滚动

图标交互

3. 添加热区

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

顶部导航跟随页面滚动

热区

4、页面窗口滚动交互

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

顶部导航跟随页面滚动

窗口滚动交互

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

顶部导航跟随页面滚动

用例1

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

顶部导航跟随页面滚动

用例2

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

顶部导航跟随页面滚动

相关文章

Axure产品原型设计规范:这3点需要注意

Axure产品原型设计规范:这3点需要注意

编辑导语:Axure 是建设软件原型的快速有力的东西,然而对付很对用户来说,他们大概没有接管过正式的培训,不知道如何故得当的方法来更有效率的利用Axure。基于此,本文作者团结案例分享了产物原型页面类...

Axure教程:实现鼠标按住时散开改变按钮颜色/增加遮罩

Axure教程:实现鼠标按住时散开改变按钮颜色/增加遮罩

首先我们来看一下简陋效果(是真的非常简陋): 请手动无视最后一次,gif上传后出现的未知问题 接下来我们聊一下如何实现这个效果,首先我们需要一个动态面板: 动态面板状态里面我们需要它们: 然...

Axure教程:数据大屏设计之实时数字滚动效果

Axure教程:数据大屏设计之实时数字滚动效果

编辑导读:本文跟各人分享,如何用Axure实现数据大屏及时数字转动结果,作者从预览图,到所需原件,再到操纵步调都一一展开了阐明,并对进程中需要留意的问题举办了先容,但愿对你有所开导。 在配置日常大屏...

Axure教程:电商平台图片放大预览的效果

Axure教程:电商平台图片放大预览的效果

我们在逛淘宝可能小红书等电商平台的时候,当我们鼠标逗留在商品大图时会呈现一个预览区域,而且右侧会呈现预览区域的放大图片,利便我们看清商品的细节。这个就是电商平台图片放大预览的结果。本日我们就一起来进修...

Axure教程:登录滑动拼图验证交互教学

Axure教程:登录滑动拼图验证交互教学

滑动拼图是互联网一种新的验证形式,被广泛应用在各种网站的登录、注册、找回密码。用户可以不需要填写复杂的验证码,而是用鼠标去拖动滑块便能通过验证。 下面为今日头条的滑动拼图验证,接下来将为大家讲解:...

Axure教程:如何用中继器实现列表添加数据案例?

Axure教程:如何用中继器实现列表添加数据案例?

编辑导语:日常事情中,我们常会碰着往列内外添加数据的环境,详细是怎么实现的呢?本文作者通过实际的操纵履历,总结分享了用Axure中继器添加数据的要领,供各人参考。 在许多b端产物中,常常会有添加数据...