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

访客4年前黑客工具946

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

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

如下图:

顶部导航跟随页面滚动

顶部导航跟随页面滚动

线上效果图,查看:

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

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

2. 添加滚动图标

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

顶部导航跟随页面滚动

滚动图标

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

顶部导航跟随页面滚动

图标交互

3. 添加热区

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

顶部导航跟随页面滚动

热区

4、页面窗口滚动交互

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

顶部导航跟随页面滚动

窗口滚动交互

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

顶部导航跟随页面滚动

用例1

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

顶部导航跟随页面滚动

用例2

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

顶部导航跟随页面滚动

相关文章

产品经理如何走出“个人增长困境”?

产品经理如何走出“个人增长困境”?

面对巨头,面对许多不确定性,许多“在野”的产品经理开始感到迷茫,陷入了个人的增长困境,本文笔者通过模拟一个增长周期展开说明,提供了走出困境的方法,并给出了对于增长的看法。 先说一个事实: 2020年...

如何通过活动方式进行拉新?

如何通过活动方式进行拉新?

今天主要聊一聊用户生命周期中,我们该如何通过活动的手段进行有效的拉新。 最近看了一些B站的视频,有一个视频聊到商战的问题,视频中有说到,这个“世界上资源是有限,而欲望是无限的”,由此想到一个问题,这...

2020 券商APP增值服务研究报告(上):是什么?为什么?

2020 券商APP增值服务研究报告(上):是什么?为什么?

文章从券商的增值服务定义出发,对其行业背景进行了讨论。 前言 3年前,Sharp曾初次尝试研究了券商增值服务,并在券商互联网发布了《券商APP增值服务收费模式探究——现状、趋势及发展建议》一文,并预...

新拟物化,会是下一个UI设计趋势吗?

新拟物化,会是下一个UI设计趋势吗?

文章分析了 UI 从无到有的流行趋势过程,从最初的拟态设计到当下设计,给出发生设计趋势变化的背景和原因,帮助大家理解设计在每一个时期与人们需求之间的关联,随着人们在每一个时期需求的不同,设计趋势也随之...

公开课|“对话腾讯产品经理”系列之产品经理入行的4大难题!

公开课|“对话腾讯产品经理”系列之产品经理入行的4大难题!

对于0经验的新手而言,入行&求职产品经理之路,就像是“一条没有地图导航的路”——没有路标、没有指路人、一路摸索,不知何时能到达目的地。 很多新人在入行产品岗时非常苦恼: 产品经理是不是还有...

产品落地方法论:深入场景,探索供给侧价值体系

产品落地方法论:深入场景,探索供给侧价值体系

在设计产品时,产品经理通常会预设用户的需求满足流程,而往往会忽视供给侧的供给流程。但供给侧在产品落地方面的作用至关重要,产品经理需要对此有足够的重视。 认知用户等于对外界的认知,我们要先关注产品到底...