bootstrap 实现吸顶效果_5种滚动吸顶效果实现方式的比较

offsetTop

用于获得当前元素到定位父级( element.offsetParent )顶部的距离(偏移值)。

定位父级 offsetParent 的定义是：与当前元素最近的 position != static 的父级元素。

或许写这个代码的人没有注意到“定位父级”这个这个附属条件。

后来在项目中总会遇到滚动吸顶的效果需要实现，现在我将我知道的 4 种滚动吸顶实现方式做详细介绍。

目录

使用 position:sticky 实现

使用 JQuery 的 offset().top 实现

使用原生的 offsetTop 实现

使用 obj.getBoundingClientRect().top 实现

性能优化篇

以上这四种方式你都了解吗？相关代码已上传到 GitHub ，感兴趣的可以 clone 代码到本地运行。望给个 star 支持一下。

四种实现方式

我们先看一下效果图：

一、使用 position:sticky 实现

1、粘性定位是什么？

粘性定位 sticky 相当于相对定位 relative 和固定定位 fixed 的结合；在页面元素滚动过程中，某个元素距离其父元素的距离达到 sticky 粘性定位的要求时；元素的相对定位 relative 效果变成固定定位 fixed 的效果。

2、如何使用？

使用条件：

父元素不能 overflow:hidden 或者 overflow:auto 属性

必须指定 top、bottom、left、right 4 个值之一，否则只会处于相对定位

父元素的高度不能低于 sticky 元素的高度

sticky 元素仅在其父元素内生效

在需要滚动吸顶的元素加上以下样式便可以实现这个效果：

.sticky { position: -webkit-sticky; position: sticky; top: 0;}

3、这个属性好用吗？

我们先看下在 Can I use 中看看这个属性的兼容性：