Axure10 案例：制作固定在顶部的导航

介绍

页面滚动时，我们在网站上可以经常看到固定在顶部的导航，它保证了用户在任何时候都可以利用顶部导航。

本教程的方案采用了最简洁快速的方式，与现有的实现方法不同。它解决了页面向下滚动时，页面中间的导航的固定效果问题。（适用于web或app端）

要实现的功能

1.当页面滚动到蓝色内容下方时，将显示固定的顶部导航。

2.当页面滚动到蓝色内容上方时，将隐藏固定的顶部导航

页面内容制作

首先设置页面样式以使页面内容左对齐。

元件制作

1.首先制作顶部导航，然后在它下面制作一个灰色矩形代表内容。复制一个顶部导航，移动到中部，然后在它下面制作一个蓝色矩形代表内容。

2.将中间的导航栏制作成动态面板，并命名为滚动栏。

3.复制顶部导航并将其转换为动态面板。然后将其固定在浏览器的左上角，并将其命名为固定栏。

4.拖动一个热区并将其转换为一个动态面板，名为顶部热区，并固定在浏览器的左上角。

5.拖动一个热区并将其覆盖在在中间的滚动栏上。高度将延伸到整个蓝色内容的高度，称为“中部热区”。

交互设置

我们只需要在窗口滚动时设置交互。如果顶部热区动态面板接触底部热区，则会显示固定栏；否则，固定栏将被隐藏。

今天的课就到这里了。如果你有任何问题和建议，请在下面留言。并请关注我哦。