css中吸附定位sticky

吸附定位的使用

sticky的注意事项

• 关于sticky属性无效的问题 (opens new window)
• 如果失效我们可以参考微信小程序里的解决方法
  • [scroll-view中嵌套一个view就能顺利定位] (https://developers.weixin.qq.com/community/develop/article/doc/000202ebeb046859fc99548c756813)
• 技巧：如果2个元素实现吸顶效果之后是挨着的，那么后面的元素不同设置/top/left/bottom/right。参考：https://developers.weixin.qq.com/community/develop/article/doc/0004aa1a354ff029492ae087f51013
• 粘性定位为什么不起作用
  • 父元素不能overflow:hidden或者overflow:auto属性。
  • 必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
  • 父元素的高度不能低于sticky元素的高度
  • sticky元素仅在其父元素内生效
• 自己的理解：
  • stickey元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。stickey定位元素相对于哪个定位的元素我们叫这个元素为scrollPort元素。
  • stickey定位的元素不会在 scrollPort元素外。所以带来的效果是stickey定位的元素在位于scrollPort元素边缘时，会被scrollPort元素卡住一同运动，参考：https://codepen.io/06-xu/pen/vYMjVbZ
  • stickey定位的元素，定位属性值的反方向上stickey元素边缘不要和scrollPort元素边缘挨着，否则那么就会受到上面一条规则的限制，导致定位无效
  • 参考文章：
    • https://www.hi-kai.top/2020/03/26/css-position-sticky/
    • https://www.cnblogs.com/coco1s/p/14180476.html