实战案例5——滑动吸附顶部和回到顶部

这章节我们将讲解两个内容：

（1）滑动吸附顶部

（2）回到顶部的使用

先来看第一个：滑动吸附顶部。下图是原始图片：

窗口往上滑动到一定位置后（我们在里面增加了热区来做检测），红色边框部分会保持不动

思路：

可以在窗口滑动动作里增加一个事件，判断窗口滑动到热区的top时，红色边框部分就不移动了。

具体事件请参考如下图

接着我们来分析如何“回到顶部”。

首先设计的逻辑是这样的：当窗口滑动到超过一个屏的时候，“回到顶部”标识就会弹出来，点击它就会回到顶部；否则该标识就会一直隐藏。

接着我们开始设计原型：

（1）设计“回到顶部”的原型

（2）增加页面顶部的热区

（3）增加点击回到顶部的事件：

（4）设置隐藏

（5）页面滑动的事件