发布:2024/12/7 22:38:30作者:管理员 来源:本站 浏览次数:110
sticky属性不生效:
检查浏览器兼容性;
检查是否指定了阈值;
检查 Safari 的供应商前缀;
检查祖先元素是否具有overflow属性集;
检查height父属性是否未设置;
检查父元素是否为 Flexbox。
检查浏览器兼容性
在检查其他问题之前,最好确保您使用的浏览器支持position: sticky.
1、检查是否已指定阈值
2、检查 Safari 的供应商前缀
3、检查祖先元素是否具有overflow属性集
4、检查height父属性是否未设置
如果父元素没有设置 height,则粘性元素在滚动时将没有任何可粘附的区域。
发生这种情况是因为粘性元素旨在在容器的高度内粘附/滚动。
5、检查父元素是否是 Flexbox
如果粘性元素的父元素是弹性盒,则有两种情况需要检查:
粘性元素已align-self: auto设置(默认设置);
粘性元素已align-self: stretch设置。
如果粘性元素已align-self: auto设置:
在这种情况下, 的值align-self将计算为父项的align-items值。
因此,如果父级有align-items: normal(默认设置)或align-items: stretch设置,
则意味着粘性元素的高度将拉伸以填充整个可用空间。这将没有空间让粘性元素在父元素中滚动。
如果粘性元素已align-self: stretch设置:
在这种情况下,粘性元素会拉伸到父元素的高度,并且没有任何区域可以滚动。
如何使粘性元素在 Flexbox 中可滚动:
您可以简单地将属性的值设置align-self为align-self: flex-start。这会将粘性元素放在开头并且不会拉伸它。
© Copyright 2014 - 2024 柏港建站平台 ejk5.com. 渝ICP备16000791号-4