吸顶解决方案

1. position: sticky

2. 动态修改元素的 position

监听页面的滚动，比较 元素初始状态距离顶部的高度 offsetTop 与 页面此时的滚动高度 。当后者大于前者时，修改元素的 position 方式为 fixed。

吸顶问题

1. 吸顶的那一刻伴随抖动

解决方案：为这个吸顶元素添加一个等高的父元素，我们监听这个父元素的 getBoundingClientRect().top 值来实现吸顶效果

2. 吸顶效果不能及时响应

当页面往下滚动时，吸顶元素需要等页面滚动停止之后才会出现吸顶效果

当页面往上滚动时，滚动到吸顶元素恢复文档流位置时吸顶元素不恢复原样，而等页面停止滚动之后才会恢复原样

原因：

在 ios 系统上不能实时监听 scroll 滚动监听事件，在滚动停止时才触发其相关的事件。

解决方案：

还记得第一种方案中的 position:sticky 吗？这个属性在 IOS6 以上的系统中有良好的兼容性，所以我们可以区分 IOS 和 Android 设备做两种处理。

IOS 使用 position:sticky，Android 使用滚动监听 getBoundingClientRect().top 的值。

如果 IOS 版本过低呢？这里提供一种思路：window.requestAnimationFrame()。