一、position:sticky生效的原理

在 W3 官方文档中的定义是：Sticky positioning is similar to relative positioning except the offsets are automatically calculated in reference to the nearest scrollport.
通俗来说就是，Sticky 定位类似于相对定位relative，在没有触发sticky特性前是relative定位，当它表现为 sticky的特性时，是fixed定位，会根据最近的滚动容器（nearest scrollport）自动计算偏移量，其中有一个**非常重要非常重要非常重要的的概念就是 nearest scrollport，它表示 sticky 元素在即将消失前会相对它最近的 scrollport 去做定位**。

二、正常的Demo

.box1{width: 300px;height: 1200px;margin-top: 200px;padding-top: 100px;background-color: aqua;}.box2{width: 200px;height: 300px;background-color: red;position: sticky;top: 0;}<div class="box1"><div class="box2"></div></div>

在此demo中，首先查看设置sticky属性的box2参考的滚动父级元素是body，但是实际上body之所以滚动，是因为box2的父级元素box1的高度撑开了body，所以box2设置的top是相对于body的

二、position: stick生效与失效原理

2.1 参考滚动父级元素是body

（1） 包裹的父容器设置了 overflow: hidden会失效

.box1{width: 300px;height: 1200px;margin-top: 200px;padding-top: 100px;overflow: auto;/* overflow: hidden;overflow: scroll;overflow: overlay; */  //父元素设置了除overflow:visible以外其他属性，都会使sticky失效background-color: aqua;}.box2{width: 200px;height: 300px;background-color: red;position: sticky;top: 0;}<div class="box1">box1<div class="box2">box2</div></div>

在此demo中，首先查看设置sticky属性的box2参考的滚动父级元素是body，但是实际上body之所以滚动，是因为box2的父级元素box1的高度撑开了body，所以box2设置的top是相对于body的，但是sticky还是失效了，失效的原因在于box2的父级元素box1设置了 overflow: hidden/auto/scroll/overlay ，此时设置sticky属性的box2元素参考的滚动元素就不是body了，而是box1，而box1的高度比box2的高度大得多，并不足以让box1实现滚动，所以无法作为box2的参考父级滚动元素，进而失效了

那么思考一个问题，在多层级的情况下，并不是在其直接父元素上设置 overflow:hidden/auto/scroll/overlay，而是在其祖先元素上设置overflow，会影响子元素的sticky属性吗？
答案是：会影响的，一样的道理，只要参考的父级滚动元素无法滚动，都是不会让其内部设置sticky的元素生效

.container{width: 700px;height: 2900px;margin-top: 200px;background-color: bisque;padding-top: 80px;/* overflow: auto; */}.parent{           //box的祖先元素padding-top: 80px;width: 600px;height: 800px;overflow: hidden; //在box的祖先元素处设置overflow：hiddenbackground-color: aqua;}.child{            //box的父级元素width: 500px;padding-top: 50px;height: 500px;background-color: red;}.box{width: 500px;height: 200px;background-color: blueviolet;position: sticky;top: 0;}<div class="container"> container<div class="parent">parent<div class="child">child<div class="box">box</div></div></div><div class="borther"></div></div>

所以，设定为 position: sticky 元素的任意父节点的 overflow 属性必须是 visible，否则 position:sticky 不会生效
（2） 包裹的最近的父容器高度小于等于sticky 元素的高度会失效
在多级嵌套的情况下，如图例，box的实际参考滚动父级元素是body，但是外层还是有几层父级结构child、parent、container（实际应用场景可当做是设置sticky元素的外层layout布局等），此时注意，如果包裹的最近的父容器高度小于等于sticky 元素的高度，也是不生效的，按道理说此时box应该是在参考的滚动父级元素body中进行sticky定位的，但是并不可以，虽然box的实际参考滚动父级元素是body，但是设置的sticky的元素box还是依赖于它包裹的最近的父容器child进行滚动，待child的高度滚动结束，box的sticky属性也会失效

.container{width: 700px;height: 2900px;margin-top: 200px;background-color: bisque;padding-top: 80px;/* overflow: auto; */}.parent{padding-top: 80px;width: 600px;height: 500px;background-color: aqua;}.child{width: 500px;padding-top: 50px;height: auto; //父元素高度自动计算background-color: red;}.box{width: 500px;height: 200px;background-color: blueviolet;position: sticky;top: 0;}

上图所示，sticky元素.box的直接父级元素.child高度没有比sticky元素大，无法实现sticky效果

再思考一个问题，在实际多层级的情况下，并不是在其直接父级上加上一个比sticky元素大的高度，而是在其祖先元素上加一个比sticky元素小的高度，可以实现sticky效果吗？
答案是：可以

.container{width: 700px;height: 2900px;margin-top: 200px;background-color: bisque;padding-top: 80px;/* overflow: auto; */}.parent{padding-top: 80px;width: 600px;height: 500px; //祖先元素高度设置了500pxbackground-color: aqua;}.child{width: 500px;padding-top: 50px;height: 1600; //最近父级元素设置高度1600pxbackground-color: red;}.box{width: 500px;height: 200px;background-color: blueviolet;position: sticky;top: 0;}

2.2 参考滚动父级元素是自己设置的内部元素

此处应该就要和上面的参考滚动父级是body做区分了，并不是在设置sticky元素的上方所有父级都不可设置overflow。此时设置sticky元素wrap1的参考滚动父级元素是wrap，而wrap的滚动是由wrap2的高度影响的，wrap2的高度比wrap高，如果不在wrap元素上设置overflow：auto/scroll/overlay，wrap是无法滚动的。而正因为wrap可以滚动，那么此时的wrap就可以当做是wrap1的参考滚动父级元素，wrap1元素的sticky效果在wrap中实现

<div class="wrap"><div class="wrap1">固定头部</div><div class="wrap2">box2</div></div>.wrap{margin-top: 100px;width: 200px;height: 500px;background-color: blanchedalmond;overflow: auto;}.wrap1{width: 100px;height: 30px;background-color: aqua;position: sticky;top: 0;}.wrap2{width: 100px;height: 2000px;background-color: yellow;}

总结

看完上面几个 DEMO，可以好好总结一下 position:sticky 的生效规则，明白了生效规则就会知道为什么有的时候设定的 sticky 会失效：

1、须确定设置sticky元素的参考滚动父级元素
2、指定 top, right, bottom 或 left 四个阈值其中之一（且达到设定的阈值），才可使粘性定位生效。否则其行为与相对定位相同；并且 top 和 bottom 同时设置时，top 生效的优先级高，left 和 right 同时设置时，left 的优先级高
3、如果sticky元素的参考滚动父级元素是body，设定为 position: sticky 的元素的任意父节点的 overflow 属性必须是 visible，不能是hidden/auto/scroll/overlay，否则 position:sticky 不会生效；且包裹的最近的父容器高度要大于sticky 元素的高度；如果sticky元素的参考滚动父级元素是自己设置的内部元素，参考滚动父级元素可以设置overflow ：/auto/scroll/overlay，且参考滚动父级元素的高度要比内部元素小