写一写吸顶效果的实现

什么是吸顶效果

当我们使用app时，时常会有这样一种场景，一个网页的最上方是一个swipe，然后下面是一个搜索栏，当我们往下滑动网页的时候，swipe会随着滑动消失，而搜索栏却会“粘”在网页最上方，这就是所谓的吸顶效果

如何实现

思路是这样的 获取元素的距离页面最上边的高度，获取浏览器滑动到的高度（也就是scrollTop），然后判断

当 浏览器滑动到的高度 - 距离页面最上边的高度 > 0 时，给元素加上fixed定位固定，设置css属性 top = 0使其保持在页面最上端。

网上有很多种实现方式，其中有些用了offsetTop，让offsetTop - scrollTop

请注意！！！！

• offsetTop像css的absoulte属性一样，是向上找一个position不为static的元素相对定位的，所以有时候会出现bug。

最好的方式是使用原生的api ： object.getBoundingClientRect().top，它一步到位表示的是元素上边到视窗上边的距离。

这样直接判断 object.getBoundingClientRect().top <= 0 就可以了

细节

不同浏览器，获取scrollTop的方式是不同的，为了兼容性应该这么写

let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop

根据这篇文章[]