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

栏目: IT技术 · 发布时间: 4年前

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

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

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

一、从一个现象说起

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

设置了 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左一），由于 <div> 元素设置了 margin-top:50px ，因此， <nav> 这个粘性定位元素的顶部和粘性约束矩形的顶部还有 33px 的距离，不会有粘性效果。
随着浏览器滚动， <nav> 元素和粘性约束矩形的顶部距离越来越小，直到为 0 。此时 <nav> 元素开始下移，使自己约束在粘性约束矩形范围内，如图1左二所示。
浏览器继续滚动， <nav> 元素的底部也快要超出粘性约束矩形范围的限制了，如图1右二所示。
最终， <nav> 元素的底部和粘性约束矩形范围的底部重合，由于粘性定位元素不能超出粘性约束矩形的范围限制，因此此时粘性效果失效， <nav> 元素被跟着一起滚走了，如图1右一所示。