CSS中的粘性定位(sticky)及不生效排查

发表于 | 分类于
CSS中的粘性定位(sticky)及不生效排查

粘性定位

要想实现元素滚动后会定在固定的位置,如果用JS就是判断根据用户滚动的高度 把元素的位置移动一下，还是相对麻烦的。

但是使用粘性定位就很简单了

在每一个元素上面 加两行样式代码就搞定了

1
2
position: sticky;
top: 0;

粘性定位可以被认为是相对定位和固定定位的混合。

元素在跨越特定阈值前为相对定位，之后为固定定位。

不生效排查

粘性元素必须设置阈值

粘性元素需要指定一个阈值：

1
2
3
4
top:0
right:0
bottom:0
left:0

这几个属性必须写一个
例如：

1
2
3
4
.sticky {
    position:stickty;
    top:0;
}

父元素必须有高度

如果父元素没有确定的height，则粘性元素在滚动时将没有任何可粘附的区域。
发生这种情况是因为粘性元素旨在在容器的高度内粘附/滚动。

高度可以设置固定的，也可能是布局分配的。

父元素overflow

1
overflow: visible;

祖先元素是滚动容器

position: sticky; 只对滚动容器内有效。

如果你希望某个元素在页面滚动时保持固定位置，它的容器必须是一个滚动容器（即:具有滚动条的容器）。

如果滚动容器是父容器的话：

只要保证父容器是滚动容器即可。

如果滚动容器是父容器的上层的容器：

就要注意overflow的设置。

overflow

position: sticky; 元素会根据其最近的滚动祖先（即具有滚动条的祖先元素）进行定位。

如果父容器有滚动条，sticky 元素的“粘性”行为可能会受到限制，因为它会被限制在滚动容器的范围内。

要解决这个问题，可以考虑以下几种方法：

  1. 调整父容器的 overflow 属性: 如果可以，将父容器的 overflow 属性设置为 visible，以确保 sticky 元素在其正常的范围内进行粘性定位。
  2. 调整布局结构: 重新考虑元素的布局结构，使 sticky 元素不直接受滚动容器的限制，或者将 sticky 元素放在一个新的容器中，该容器不具有滚动属性。
  3. 使用 JavaScript: 在一些复杂的布局情况下，可以使用 JavaScript 监控滚动事件来模拟 sticky 行为。

总之，position: sticky; 的实现依赖于滚动容器的行为，所以如果包含元素的容器有滚动条，可能需要对布局进行一些调整来实现所需的效果。

如果 position: sticky; 元素的父容器设置了 overflow: hidden;、overflow: scroll; 或 overflow: auto;，sticky 可能会失效。

确保父元素的 overflow 属性设置为 visible。

检查具有overflow属性集的父母的片段：
只需在浏览器的 Web 开发人员控制台中复制/粘贴以下代码片段，即可识别overflow属性设置为 以外的所有父元素visible：

1
2
3
4
5
6
7
8
let parent = document.querySelector('.sticky').parentElement;
while (parent) {
    const hasOverflow = getComputedStyle(parent).overflow;
    if (hasOverflow !== 'visible') {
        console.log(hasOverflow, parent);
    }
    parent = parent.parentElement;
}

粘性元素高度应小于父容器

如果 sticky 元素所在的容器高度不足，可能会导致 sticky 效果无法展示。确保容器的高度足够，以允许 sticky 元素正常工作。

小程序中被原生遮挡

小程序中原生组件比如image会在上层，就会挡着粘性定位的元素。

设置z-index即可。

1
2
3
position: sticky;
top: 80px;
z-index: 2