如何利用Axure做出页面下拉时顶部导航浮动并切换的交互效果? 本文将分别讲述移动端和PC端应该如何做。

通常在一些大型的电商网站常见,首页内容下滑时,超过顶部导航高度时,顶部导航随着下滑固定在浏览器顶部,并在样式上有变化。

如下两图:

Axure制作页面下拉时,顶部导航浮动并切换的交互效果

下滑前图例

Axure制作页面下拉时,顶部导航浮动并切换的交互效果

下滑后图例

如何利用Axure做出这样的交互效果? 本文将详细讲述移动端和PC端应该如何做。

(PC端交互效果)

拉取一个动态面板,命名“顶部导航”,宽度1300PX,高度40PX;

设置属性,100%浏览器宽度,背景颜色为灰色,并且固定至浏览器窗口,居中0.垂直固定上 0px;

Axure制作页面下拉时,顶部导航浮动并切换的交互效果

隐藏该动态面板:

Axure制作页面下拉时,顶部导航浮动并切换的交互效果

点击该动态面板,在面板里面设置搜索框样式;

Axure制作页面下拉时,顶部导航浮动并切换的交互效果

返回首页,设置条件:

窗口滚动时,滚动值>150px时,显示“顶部导航”;

滚动值<150px时,隐藏“顶部导航”;

Axure制作页面下拉时,顶部导航浮动并切换的交互效果

Axure制作页面下拉时,顶部导航浮动并切换的交互效果

设置完成,刷新预览,当页面下拉150px时,可看到顶部导航随页面下拉固定至浏览器顶部且样式变化,页面下拉小于150px时,隐藏“顶部导航”显示原导航;

移动端交互效果

移动端下拉时和PC稍有不同:

Axure制作页面下拉时,顶部导航浮动并切换的交互效果

滑动前,注意【价格-销量-品牌】标签;

Axure制作页面下拉时,顶部导航浮动并切换的交互效果

滑动后,banner图片随内容下滑而被遮挡,【价格-销量-品牌】标签固定在导航栏下面;

如何实现呢?

需调用动态面板的专用函数scrollY;

将banner图,【价格-销量-品牌】标签,以及下面的商品列表右键转为动态面板,命名为“内容”,正常全部高度要大于667px;

设置“内容”动态面板的滚动条为自动显示垂直滚动条;

Axure制作页面下拉时,顶部导航浮动并切换的交互效果

将内容动态面板高度缩为正常667PX高度;

进入“内容”动态面板,将【价格-销量-品牌】标签右键转为动态面板,命名为“顶部导航”;

回到“内容”动态面板,添加用例,当滚动时,如果“内容”动态面板的距离大于banner图的高度,则移动“顶部导航”至(0.[[This.scrollY]]),如果“内容”动态面板的滚动的距离小于banner高度,则“顶部导航”回到(0.110)110为“顶部导航”案例中原位置坐标。

Axure制作页面下拉时,顶部导航浮动并切换的交互效果

Axure制作页面下拉时,顶部导航浮动并切换的交互效果

Axure制作页面下拉时,顶部导航浮动并切换的交互效果

设置完成,刷新预览,当页面下拉106px时,可看到顶部导航随页面下拉固定至导航栏下面,页面下拉小于106px时,“顶部导航”回到原位置。