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

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

如下两图：

下滑前图例

下滑后图例

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

（PC端交互效果）

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

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

隐藏该动态面板：

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

返回首页，设置条件：

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

滚动值<150px时，隐藏“顶部导航”；

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

移动端交互效果

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

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

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

如何实现呢？

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

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

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

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

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

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

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

本文由 @胖子 原创发布于人人都是产品经理。未经许可，禁止转载

语：今天，本文作者和大家分享一下如何通过Axure实现网站Tab导航栏切换内容页和返回顶部交互，希望看后对你能有所帮助。

我们在使用知乎时，会发现向下滚动页面，网站Tab导航栏会发生内容切换；同时滚动超过一定距离，会出现回到顶部按钮，点击该按钮，即可返回页面顶部。

一、实现逻辑

1. 向下滑动页面，Tab导航栏由第一种状态切换成第二种状态；向上滑动页面，Tab导航栏由第二种状态切换成第一种状态；
2. 页面滑动一定距离，显示回到顶部按钮，点击回到顶部按钮，页面向上滚动回到页面顶部。

二、页面构建元件准备

顶部栏两种状态及下滑页面准备，我是通过截图的方式准备的：

回到顶部按钮、鼠标移入按钮时所显示的浮窗，将该组合命名为“回到顶部-总”：

三、添加交互事件

将顶部栏的两种状态分别放入动态面板中的状态1与状态2中，将动态面板命名为statusBar；

添加鼠标移入回到顶部按钮显示”回到顶部”气泡：

添加向下、向上滑动页面，顶部状态栏切换；

其次，对窗口添加交互：

将“回到顶部-总”组合转为动态面板，将该动态面板命名为“回到顶部-总panel”，固定动态面板显示位置，并隐藏：

添加锚点元件，我们在此选择热区元件，因为热区具有透明的特性，将其命名为TopLocation：

为“回到顶部”按钮增加交互，鼠标移入显示“回到顶部”气泡，移除隐藏“回到顶部”气泡；为“回到顶部”按钮添加【单击时】用例，设置动作【滚动到元件】，选择TopLocation，垂直线性滚动500毫秒。

四、最终效果展示

五、补充知识

在上面交互的应用中，我们会用到Window.scrollY函数，该函数为窗口函数；窗口函数一共包括以下四种：

1. Windows.width：获取浏览器的当前宽度。
2. Windows.height：获取浏览器的当前高度。
3. Windows.scrollX：获取浏览器的水平滚动距离。
4. Windows.scrollY：获取浏览器的垂直滚动距离。

本文由 @小青 原创发布于人人都是产品经理，未经许可，禁止转载

题图来自 Unsplash，基于 CC0 协议