深入理解position sticky粘性定位的计算规则

byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=9291

本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。

一、从一个现象说起

设置了 position:sticky 粘性定位的元素的父元素如果高度计算值和粘性定位元素一样高，则垂直滚动的时候，粘性定位效果是不会出现的。

很多人不理解为什么会这样？

要讲清楚这个问题，就必须深入理解粘性定位的计算规则。

二、深入理解粘性定位的计算规则

粘性定位中有一个“流盒”（flow box）的概念，指的是粘性定位元素最近的可滚动元素的尺寸盒子，如果没有可滚动元素，则表示浏览器视窗盒子。

粘性定位中还有一个名叫“粘性约束矩形”的概念，表示的是粘性定位元素的包含块在文档流中呈现的矩形区域和流盒的四个边缘在应用粘性定位元素的 left 、 top 、 right 、 bottom 属性的偏移计算值后的新矩形的交集。

由于滚动的时候，流盒不变，而粘性定位元素的包含块跟着滚动，因此粘性约束矩形随着滚动的进行是实时变化的。

假设我们的粘性定位元素只设置了 top 属性值，则粘贴定位元素碰到粘性约束矩形的顶部的时候开始向下移动，直到它完全包含在粘贴约束矩形中。

下面我们根据一个简单的例子来进一步理解上面的规则，例如，有一个页面是窗体滚动，包含 <div> 元素和 <nav> 元素，这两个元素是父子关系，HTML代码如下：

<div>
  <nav>导航</nav>
</div>

其中：

div {
    height: 100px;    
    margin-top: 50px;
    border: solid deepskyblue;
}
nav {
    position: sticky;
    top: 20px;
    background: lightskyblue;
}

则随着滚动的进行， <nav> 元素的粘性约束矩形范围和实际的渲染表现如图1所示：

图1 top方位的粘性定位原理示意图

详细的计算规则如下：

由于 <nav> 这个粘性定位元素的 top 偏移是 20px ，因此，流盒矩形就是滚动窗口矩形再往下偏移 20px ，就是图中的红色色块区域。而 <nav> 这个粘性定位元素的包含块就是其父元素 <div> 元素（设置了边框），粘性约束矩形指的是流盒矩形和包含块的重叠区域，因此，图所示的粘性约束矩形就是红色色块区域和方框区域重叠的矩形区域。

然后：

1. 在默认状态下（图1左一），由于 <div> 元素设置了 margin-top:50px ，因此， <nav> 这个粘性定位元素的顶部和粘性约束矩形的顶部还有 33px 的距离，不会有粘性效果。

2. 随着浏览器滚动， <nav> 元素和粘性约束矩形的顶部距离越来越小，直到为 0 。此时 <nav> 元素开始下移，使自己约束在粘性约束矩形范围内，如图1左二所示。

3. 浏览器继续滚动， <nav> 元素的底部也快要超出粘性约束矩形范围的限制了，如图1右二所示。

4. 最终， <nav> 元素的底部和粘性约束矩形范围的底部重合，由于粘性定位元素不能超出粘性约束矩形的范围限制，因此此时粘性效果失效， <nav> 元素被跟着一起滚走了，如图1右一所示。

如果还不是很理解，您可以狠狠地点击这里： 帮助理解粘性定位的学习页面

right 、 left 以及 bottom 方向的定位与top方向类似。

明白了粘性定位的计算规则，也就明白为什么粘性定位元素父元素和自身高度计算值一样的时候没有粘性效果了。因为此时包含块高度和粘性定位元素一样，导致粘性约束矩形的高度最大也就是和粘性定位元素一样高，粘性定位元素的已经完全没有了实现粘性效果的空间。

三、粘性定位其他特征

• 如果我们的粘性定位元素的某个祖先元素的 overflow 属性值不是 visible ，那么页面滚动的时候就不会有粘性定位效果。
• 同一容器中多个粘贴定位元素独立偏移，因此可能重叠；不同容器中的粘贴定位元素则会鸠占鹊巢，挤开原来的元素，形成依次占位的效果。

上面这些特性的详细说明以后再展开。

以上~感谢阅读，感谢分享！

本文为原创文章，欢迎分享，勿全文转载，如果实在喜欢，可收藏，永不过期，且会及时更新知识点及修正错误，阅读体验也更好。

本文地址： https://www.zhangxinxu.com/wordpress/?p=9291

（本篇完）