前端 实现吸顶的三种方式

何为吸顶？吸顶就是随着页面滚动，某个元素在移动到顶部后便会固定下来，并且不会再因为页面继续滚动而消失。

常见应用于页面的Tab栏。以下是自己在学习过程中简单整理的三种吸顶方式（ 仅描述思路 ）。

一、position: sticky

设置粘性定位并且添加某个方位才可生效，但是兼容性较差。

二、动态修改元素的position

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

三、障眼法

跟第二种方法有相似的地方，而第二种方式更为常用与简便。

当第二种方法不起作用的时候可以选择第三种方法，比如在 better-scroll 框架内实现吸顶效果，固定定位会出现定位不准确的问题。

具体操作：

1. 复制一个相同的元素，将其固定于顶部并让其先隐藏。
2. 监听页面的滚动，比较 元素初始状态距离顶部的高度offsetTop 与 页面此时的滚动高度 ，当后者数值大于前者数值时，原来的元素刚刚好触顶，且正与新元素的位置重合。
3. 此时我们在监听方法中，让这个新元素显示。
4. 当页面继续滚动的时候，原来的元素已经被滚上去了，而新的元素一直被固定在顶部并且此时已经显示出来，所以这个过程发生的时候，会让人有一种元素改变了定位方式的错觉。