position设置sticky不生效的几种情况

1.它的父元素或者父元素的父元素等（总之就是直系长辈元素）任意一个设置overflow:hidden;overflow-x: hidden; overflow-y: hidden;overflow:auto;overflow-x:auto;overflow-y:auto;的任意一种时，就会不生效。父元素的高度小于设置sticky元素的高度时 sticky也失效

2.未设置top,right,bottom,left中的任意一个值。相当于没设置脱离文档流后的固定位置，是以哪个位置为依据。所以也不会起到效果。

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

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

5.小程序开发的时候，scroll-view包裹sticky sticky失效。解决方案：需要算滚动高度 在适当情况下设置position:fixed;进行固定。效果与设置sticky相同。

写法：scroll-view里面包含view元素 给view元素设置id 当滚动的时候 获取该id距离顶部窗口之间的距离 以吸顶top为0这种为例 当距离为0时 设置fixed为true isFixed样式生效 该样式是设置position:fixed;所以就吸顶了 当大于0时 将fixed设置为false 这样吸顶效果消失

6.小程序page虽然自带overflow-x: hidden;属性，但是并不会影响sticky效果。这里需要注意哦。如果小程序中sticky效果不生效，找一下其他因素带来的影响。

 

来源: http://www.shanhubei.com/archives/2552.html