窗口滚动范围在顶部与标题①之间的时候会触发 Case5 事件，这时候是没有任何标题停靠效果的，但当窗口在这个范围内滚动的时候，可能是开始滚动，也可能是滚动到页面最后之后又回到了这个区间，所以需要考虑第二种情况，增加一些动作（上面 Case5 下的动作）来保证原形的可靠性。

【Case4】

100≤窗口滚动距离＜350

当窗口向下滚动或者向上滚动到 Case4 的区间时，编号①停靠在窗口顶部，编号②仍然随页面滚动，在这一步需要注意的是编号①已经停靠在窗口顶部，编号②要停靠在编号①下面，所以窗口滚动范围的最大值需要减少一个编号的高度，如上图所表示。而最终编号①停靠的位置则是页面滚动的位置“Window.scroll.Y”，其他编号的位置保持原来的绝对位置不变。

在 Case4 中，编号①会停靠，在停靠时设置其的选中状态为“false”以实现改变填充色的效果。

【Case3】

350≤窗口滚动距离＜700

当窗口向下滚动或向上滚动到 Case3 区域时，编号①和编号②依次停靠在窗口顶部，编号③仍然随页面滚动，同 Case4 的原理相同，Case3 的滚动范围最大值需要减少两个编号的高度。编号①和编号②的停靠位置分别是“Window.scroll.Y”和“Window.scroll.Y+50”，其他编号位置保持绝对不变。

在 Case3 中，编号①已经停靠，编号②会停靠，因此需要设置编号②的选中状态为“false”以改变其填充色。

【Case2】

700≤窗口滚动距离＜1050

当窗口向下滚动或向上滚动到 Case2 区域时，编号①，②，③依次停靠在窗口顶部，开奖，编号④仍然随页面滚动，同 Case3 的原理相同，Case2 的滚动范围最大值需要减少三个编号的高度。编号①，②，③的停靠位置分别是“Window.scroll.Y”，“Window.scroll.Y+50”和“Window.scroll.Y+100”，其他编号位置保持绝对不变。

在 Case2 中，编号①，②已经停靠，编号③会停靠，因此需要设置编号③的选中状态为“false”以改变其填充色。

【Case1】

窗口滚动距离≥1050

当窗口向下滚动或向上滚动到 Case1 区域时，全部编号依次停靠在窗口顶部，Case1 的滚动范围最大值直接到页面底部。编号①，②，③，④的停靠位置分别是“Window.scroll.Y”，“Window.scroll.Y+50”，“Window.scroll.Y+100”，“Window.scroll.Y+150”。

在 Case1 中，编号①，②，③已经停靠，编号④会停靠，因为编号④是最后一个编号，所以在停靠以后不再改变其填充色。

到这里全部的事件和动作已经添加完成，虽然没有涉及到任何复杂的动作、函数、变量等内容，但是这处理的逻辑还是需要好好梳理一下的。尤其是关于这5个 Case 的先后顺序，由于每个 Case 都是需要满足一定的条件时才会触发，因此判断条件也决定了五个 Case 必须的排列顺序，否则无法正常触发事件。

4、补充说明

对于 Axure 的原型预览，不同浏览器的预览效果是不尽相同的，拿本案例来说，如果想获得最佳的预览效果，那必然是 Google 浏览器，j2直播，而 IE 浏览器的效果则不那么理想。

另外，关于第三部分制作过程中的5个 Case 的示意图，并非预览时看到的效果，而是在 Axure 工作区中看到的效果，因此5个编号的填充色跟实际预览时会有差异（未停靠的编号填充色应为浅绿色，停靠后的编号颜色变为浅灰色）。

#专栏作家#

RAEDME大鹏，人人都是产品经理专栏作家，微信公众号raedme

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