byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=9291
本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。
一、从一个现象说起
设置了 position:sticky 粘性定位的元素的父元素如果高度计算值和粘性定位元素一样高，则垂直滚动的时候，粘性定位效果是不会出现的。
很多人不理解为什么会这样？
要讲清楚这个问题，就必须深入理解粘性定位的计算规则。
二、深入理解粘性定位的计算规则
粘性定位中有一个“流盒”（flow box）的概念，指的是粘性定位元素最近的可滚动元素的尺寸盒子，如果没有可滚动元素，则表示浏览器视窗盒子。
粘性定位中还有一个名叫“粘性约束矩形”的概念，表示的是粘性定位元素的包含块在文档流中呈现的矩形区域和流盒的四个边缘在应用粘性定位元素的 left 、 top 、 right 、 bottom 属性的偏移计算值后的新矩形的交集。
由于滚动的时候，流盒不变，而粘性定位元素的包含块跟着滚动，因此粘性约束矩形随着滚动的进行是实时变化的。
假设我们的粘性定位元素只设置了 top 属性值，则粘贴定位元素碰到粘性约束矩形的顶部的时候开始向下移动，直到它完全包含在粘贴约束矩形中。
下面我们根据一个简单的例子来进一步理解上面的规则，例如，有一个页面是窗体滚动，包含
元素和
元素，这两个元素是父子关系，HTML代码如下：
其中：
div {
height: 100px;
margin-top: 50px;
border: solid deepskyblue;
}
nav {
position: sticky;
top: 20px;
background: lightskyblue;
}
则随着滚动的进行，