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效果不生效,找一下其他因素带来的影响。

微信公众号
手机浏览(小程序)
0
分享到:
没有账号? 忘记密码?