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

访客4年前黑客工具905

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

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

如下图:

顶部导航跟随页面滚动

顶部导航跟随页面滚动

线上效果图,查看:

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

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

2. 添加滚动图标

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

顶部导航跟随页面滚动

滚动图标

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

顶部导航跟随页面滚动

图标交互

3. 添加热区

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

顶部导航跟随页面滚动

热区

4、页面窗口滚动交互

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

顶部导航跟随页面滚动

窗口滚动交互

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

顶部导航跟随页面滚动

用例1

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

顶部导航跟随页面滚动

用例2

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

顶部导航跟随页面滚动

相关文章

2020年应聘反思,我总结了这些点

2020年应聘反思,我总结了这些点

在职场生涯中,我们大概会在好几家公司事情,从头应聘一定会碰着许多的问题。本文作者基于自身经验,从五个角度总结了本身的应聘经验,分享给对求职苍茫的童鞋。 先简朴先容一下本身的环境,16年结业,回到了互...

拒绝被替代!发挥产品经理的核心价值

拒绝被替代!发挥产品经理的核心价值

想要成为一个很难被取代的产品经理,你首先需要找到自身的核心价值。那么产品经理的核心价值是什么,文章对此进行了分析论述,与大家分享。 最近一段时间看群里有小伙伴说自己所在的公司,在产品成型后有把产品岗...

视频号粉丝数TOP100榜单,投射出哪些运营优劣势?

视频号粉丝数TOP100榜单,投射出哪些运营优劣势?

今天看到了一份数据,来自第三方监测的微信视频号TOP100(统计至4月11日,跟实际可能有所出入,仅供参考)。 单看数据有点吃惊,榜首是李子柒,粉丝量不到20万,第100名粉丝量仅过万。 这数据显...

社区团购分析报告:以美团优选为例

社区团购分析报告:以美团优选为例

编辑导读:社区团购在连年来成长势头越来越好,不少互联网公司都对准这一规模,加大在此的投入。美团作为当地糊口这条赛道上的佼佼者,自然也不甘落伍。本文将以美团优选为例,举办四个方面的阐明,但愿对你有辅佐。...

听到这些互联网词汇,就知道对方又没“说人话”了

听到这些互联网词汇,就知道对方又没“说人话”了

那些可以或许深入浅出,用浅显的语言把巨大的内容讲大白的人,才是真正的好手。 前段时间,互联网人因为“不爱说人话”而成为了热门话题。 有的互联网人抵赖道:“不是我存心为难在座的列位,我们互联网人的日常...

相对数值在数据分析中的运用

相对数值在数据分析中的运用

编辑导语:在举办数据比拟时,我们会用到相对数值的观念,相对数值可以明晰我们在差异工具之间的干系;所以在数据阐明中,我们常常会用到相对数值;本文作者分享了关于相对数值在数据阐明中的运用,我们一起来看一下...