position: sticky不起作用
时间: 2023-09-29 09:10:42 浏览: 70
position: sticky的作用相当于relative和fixed的结合体。当修饰的目标节点在屏幕中时,它的表现类似于relative定位,即会随滚动而移动。当目标节点即将要超出屏幕时,它会切换为fixed的形式,即会固定在屏幕上的指定位置。这个特性使得元素能够在页面滚动时保持在视口内部或特定位置上。
然而,有一些情况下,position: sticky可能不起作用。例如,在小程序开发中,当使用scroll-view包裹sticky元素时,sticky会失效。为了解决这个问题,需要手动计算滚动高度,并在适当的情况下使用position: fixed进行固定。这样做的效果与设置sticky相同。
另外,如果使用position: sticky时未设置top、right、bottom、left中的任意一个值,那么sticky会失效。因为没有设置脱离文档流后的固定位置,所以它不会起到效果。