position:sticky不生效

通常我们用来实现吸顶效果都会用到position:sticky,但是在以下这几种情况的时候sticky会失效。

position-sticky 生效的原理在

W3 官方文档中的定义是：Sticky positioning is similar to relative positioning except the offsets are automatically calculated in reference to the nearest scrollport.github

转换成通俗的大白话就是，Sticky 定位相似于相对定位，（当它表现为 fixed 定位的特性时）会根据最近的滚动容器（nearest scrollport）自动计算偏移量。
其中有一个很是重要的概念就是 nearest scrollport，它表示 sticky 元素在即将消失前会相对它最近的 scrollport 去作定位。

position: sticky失效原因

1.父元素的高度小于或者等于设置sticky元素的高度时sticky失效

若是在 .sticky 元素和你想要.sticky 生效吸附的滚动元素中间，添加上一层 .parent 的 div 元素，不给 div 添加任何样式，sticky 则失效了。

譬如是这样：

<div class="container">      - 可滚动的容器 scrollport     
    <div class="parent"> 
         <div class="sticky">   - 设置了 sticky 的元素

失效缘由：此时 .sticky 元素的最近的 scrollport 变成了它的父容器 div，而父容器 div 的高度和 .sticky 元素的高度是同样的，因此表现不出 fixed 的特性。
其实，这里不算失效，咱们只须要将包裹 .sticky 元素的父容器的高度设置的大于 .sticky 元素自己，也能看到效果。
譬如，咱们能够加上

.parent {
    height: 100vh;
}

此时，sticky 将从新生效，像是这样。
其实，形成这种现象的本质缘由是，设置了 position: sticky 的元素吸附的基准元素从 .container 变成了 .parent 。

2.元素的父元素或者父元素的父元素等任意一个设置overflow:hidden;overflow-x: hidden; overflow-y: hidden;overflow:auto;overflow-x:auto;overflow-y:auto;的任意一种时，就会不生效。

若是在 sticky 元素和你想要sticky 生效吸附的滚动元素中间的父元素或祖先元素上等任意一个设置overflow:hidden;overflow-x: hidden; overflow-y: hidden;overflow:auto;overflow-x:auto;overflow-y:auto;的任意一种时，sticky就会不生效

.sticky 元素的祖先容器存在 overflow: hidden。相似这样

<div class="container">      - 可滚动的容器 scrollport     
    <div class="hidden">      - 设置了 overflow: hidden
         <div class="sticky">   - 设置了 sticky 的元素

上面这个 DEMO 里面，设置了sticky的元素的父元素hidden元素，它的高度是远比stikcy元素高的，可是滚动的过程当中却没有表现出 fixed 的特性。
缘由在于，设置了overflow: hidden的元素，它再也不代用滚动的特性，当sticky元素吸附于hidden元素的顶部时，它随着hidden元素自己在 container 移动。因此，全部的 sticky 元素都会被滚动出 container 的滚动区域。
固然，这里有一点比较奇怪的是，.sticky元素相对.hidden元素进行 fixed 定位，而不是相对.containe元素进行 fixed 定位，表面设置了overflow: hidden的元素，它也是一个 scrollport。
其实，不止是overflow: hidden，设定为position: sticky元素的任意父节点的 overflow 属性必须是 visible，不然position:sticky不会生效。

3.未设置top,right,bottom,left中的任意一个值

相当于没设置脱离文档流后的固定位置，是以哪个位置为依据。所以也不会起到效果。

4. 多处设置sticky，z-index值相同，则后面的滚动到相应位置覆盖住前面的

一个页面中，多处设置sticky。如果设置的固定住的位置相同，z-index值相同，则后面的滚动到相应位置覆盖住前面的。若z-index值不同，z-index值大的 覆盖住z-index小的 显示。

5.子元素父元素同时设置sticky

• 父元素设置sticky top:0 子元素设置sticky top:0 在z-index值相等 或者子元素z-index大于父元素时，子元素在上面并且吸顶 滚动出父元素后 子元素还在吸顶 直到下一个sticky覆盖 所以多层时 要么加上父元素一起设置sticky 要么将sticky设置在最外层。
• 子元素和父元素都设置 sticky top:0 ,z-index值相等 给子元素距离父元素一个margin-top: 100px;那么吸顶的是父元素 子元素将一直在100px位置不会移动。很有趣

6.小程序开发的时候，scroll-view包裹sticky sticky失效。

解决方案：需要算滚动高度 在适当情况下设置position:fixed;进行固定。效果与设置sticky相同。

7.低于 13 的 Safari 版本，属性值未添加供应商前缀，sticky失效

确保为属性值添加供应商前缀以支持低于 13 的 Safari 版本，
例如，如下所示：

.sticky {
    position：-webkit-sticky;
    position：sticky； 
    top：0；
}