我们在日常欣赏网页的时候，会发明上面的导航栏一直保持不动，而下面的内容会跟着转动条的拖动而滑动，这个结果就是所谓的顶部吸附的结果。本文作者先容了如何用Axure实现导航栏吸附结果的操纵步调，以及实现进程中的一些心得体会，与各人分享。

01 前期筹备

软件：Axure 9.0

硬件：Windows/Mac电脑

思考：实现吸附结果前的思考（可参考下图）

02 教程

（1）建造PC页面如下图（本文以考拉海购为例）

（2）将顶部搜索区组归并定名，右键将组合配置为顶层，主要是为后续针对搜索区实现吸附结果。

（3）接下来，对页面配置窗口转动时的交互，这时候要思量两种环境：

担保可以或许正常转动所有内容

牢靠搜索区内容，只转动下方内容

（4）先确定好搜索区在你配置页面的x，y的位置（我这里显示的是x=79 ,y=171)

(5) 我们针对页面选择交互【窗口转动时】，并添加景象1如下图，意思就是当我们转动的时候高出搜索区的高度，我们就执行吸附结果的交互

（6）添加景象2如下图，因为我们这里只有两种景象，可以直接不添加条件，会默认配置为景象1的对立条件，该结果就是为了实现当页面转动回顶部的时候，让搜索区回到它原来的位置上。

（7）再次将搜索区置于顶层，预览查察吸附结果，重复调解，直到满足为止，我们就做好了。

结语

这次我们用到的是窗口函数，有的同学大概会问，为什么不消动态面板，动态面板其实更适合告白位等牢靠位置的转动展示，好比一直保持在底部可能顶部。本次结果主要是为了让各人越发熟悉窗口函数的利用。