Axure怎么制作顶部吸附交互效果的网页原型?
百度经验 发布时间：2018-12-18 16:32:22 作者：毕志华1991 
我要评论
我要评论Axure怎么制作顶部吸附交互效果的网页原型？我们在浏览网页的时候，会发现网页有很多效果，想要制作一个顶部吸附交互效果，该怎么实现呢？下面我们就来看看详细的教程，需要的朋友可以参考下
我们在日常浏览网页的时候，会发现上面的导航栏一直保持不动，而下面的内容会随着滚动条的拖动而滑动，这个效果就是所谓的顶部吸附的效果，该怎么使用axure制作这个交互效果呢？下面我们就来看看详细的教程。
1、首先新建一个空白页面，在工作区域拖入本次要使用的元件元素，几个矩形和几个动态面板就可以了，如下图所示。
2、然后我们对元件元素的样式进行调整，并对里面的描述文字进行编写，如下图所示。
3、这一步需要对两个动态面板的名称进行设置，一个是上面的信息展示，一个是下面的导航信息，如下图所示。命名没有要求，想叫什么都可以。
4、打开动态面板，将两个矩形复制到动态面板中，如下图所示。
5、下面一步需要将两个动态面板的固定到浏览器这一项进行设置，水平要固定到居中位置，垂直要在上，如下图所示。
6、元件相关样式及属性设置完成后，开始对交互事件进行设置，这里需要给页面加入交互事件，首先是第一个判断条件，使用函数判断窗口距离，如下图所示。
7、然后设置第一个动态面板移动的绝对位置，如下图所示。
8、然后设置第二动态面板隐藏，如下图所示。
9、同上的方式，做第二个判断条件，并对两个动态面板的交互进行设置，如下图所示。
10、最后一步，因为是窗口滚动的效果，所以需要再拖入一个矩形，并将矩形拉长一些，这样浏览的时候窗口就有滚动条了，如下图所示。
11、好了，工作准备完成，f5预览一下效果，试着滚动鼠标，这些信息栏会消失，导航栏会吸附到最上面。
以上就是Axure顶部吸附交互效果的制作方法，希望大家喜欢，请继续关注脚本之家。
相关推荐：
相关文章
Axure怎么制作控制条控制地图放大效果？Axure中想要制作一个地图放大效果，并且可以使用控制条控制，下面我们就来看看详细的教程，需要的朋友可以参考下2018-12-11
Axure怎么制作模拟地图放大效果？Axure中制作网页原型的时候，想要制作模拟百度底乳放大缩小的效果，该怎么制作呢？下面我们就来看看详细的教程，需要的朋友可以参考下2018-12-07
Axure怎么制作图片局部放大的效果？Axure中想要制作图片局部放大的效果，该怎么制作呢？下面我们就来看看Axure局部放大效果的制作方法，需要的朋友可以参考下2018-12-06
Axure怎么制作翻转效果的手机引导页？Axure中想要制作一个引导页，该怎么制作翻转效果的引导页呢？下面我们就来看看详细的教程，需要的朋友可以参考下2018-12-03
Axure怎么制作滑动引导页效果的原型？Axure中设计网页原型很简单，想要制作一个华东的引导页，该怎么制作这个动摇交互效果呢？需要的朋友可以参考下2018-12-03
Axure怎么设计调整屏幕亮度效果的效果？Axure设计网页原型很简单，想要制作一个调整屏幕亮度的交互效果，该怎么制作呢？下面我们就来看看详细的教程，需要的朋友可以参考下2018-11-30
Axure怎么制作手机充话费的界面效果？经常使用网络充值话费，想要制作话费充值页面，该怎么制作呢？下面我们就来看看axure制作话费充值界面的教程，需要的朋友可以参考下2018-11-29
Axure怎么制作按钮控制数据递加递减效果？Axure中想要制作一个数字递加递减的效果，该怎么制作呢？下面我们就来看看详细的教程，需要的朋友可以参考下2018-11-28
Axure怎么制作文字滚动的动态效果？Axure中想要制作一个滚动字幕，该怎么给文字添加滚动效果呢？下面我们就来看看详细的教程，需要的朋友可以参考下2018-11-28
Axure怎么制作云层滚动的动态效果？Axure中想要制作一个云层效果，并添加翻滚的动态效果，该怎么制作呢？下面我们就来看看详细的教程，需要的朋友可以参考下2018-11-27
最新评论