本文作者将详细跟大家讲解，如何使用 Axure模拟百度经验编号停靠效果。

相信很多小伙伴都使用过“百度经验”，比如你在百度搜索某个软件怎么用，某个事情怎么办的时候，经常会在搜索结果中看到比较靠前的结果带有“百度经验”字样的结果，然后点进去进入的是百度经验的专题页面。

在百度经验的专题页面，通常会有分步的讲解，而每一步都会有一个编号，当页面向下滚动时，编号便会向上移动依次排列停靠在浏览器的顶部，就像下面的效果。

（点击预览）

本文就是要详细跟大家讲解如何使用 Axure 来实现这种效果，更多精彩内容，请继续浏览。

1、原型解析

这个原型的交互事件只有一个，就是上下滚动窗口，而这事件最终达到的效果就是使得编号可以根据上下滚动的距离自动的进行停靠和跟随页面滚动；而对于编号的停靠，则是需要编号①停靠在浏览器窗口顶部，编号②停靠在编号①下面，编号③停靠在编号②下面，以此类推，同时已经停靠的编号背景色会由绿色变为灰色。

2、设计思路

提到“停靠”二字（或者叫“吸附”），可能小伙伴们**想到的是动态面板的“固定到浏览器”效果，确实，动态面板的这一特性在很多场景中都非常实用，而且特别方便。然而，在这个案例中，却不适用这种方法，因为动态面板的“固定到浏览器”属性，会使得动态面板自始至终都是固定在页面的特定位置，而无法随着页面的滚动进行固定或取消固定，那么此路不通就需要另辟蹊径了。

其实在很多时候进行原型设计，不能被交互的表象给迷惑，也就是说不能一条道走到黑，我们需要学会绕弯子。那么在这个案例中，如何来绕弯子呢？虽然不能直接使编号进行停靠，但是我们可以根据页面滚动的距离来移动编号到指定的位置，其实核心就是通过移动来实现，而移动的时机或者说条件，就是根据窗口的滚动来定义了。

3、制作过程