主要介绍了4种滚动吸顶实现方式的比较，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

修改版预览 这篇文章是三天前写就的，有大佬给我提了一些修改意见，我觉得这个意见确实中肯。所以就有了这个升级的修改版本。代码同步更新到 GitHub 了。 修改内容如下： 添加了图文说明，直观的说明 getBoundingClientRect()集合含义 频繁 reflow 风险该如何规避(优化滚动监听) 监听滚动带来的性能问题(使用 IntersectionObserver, 新方案) 修改更新的内容在第 4 点和第 5 点，如果你看过本文，可以直接看修改更新的内容。或者

前言 我入职第二家公司接到的第一个需求就是修复之前外包做的滚动吸顶效果。我当时很纳闷为何一个滚动吸顶会有 bug，后来我查看代码才发现直接用的是 offsetTop 这个属性，而且并没有做兼容性处理。 offsetTop 用于获得当前元素到定位父级（ element.offsetParent ）顶部的距离（偏移值）。 定位父级 offsetParent 的定义是：与当前元素最近的 position != static 的父级元素。 或许写这个代码的人没有注意到“定位父级”这个这个附属条件。 后