CSS 为什么 Chrome 中的 position: sticky 不起作用

在本文中，我们将介绍为什么在 Chrome 浏览器中使用 position: sticky 时可能会出现问题。position: sticky 是 CSS 中的一种定位属性，可以将元素固定在容器的某个位置，直到滚动到特定位置时才进行相对定位。然而，有些情况下，position: sticky 在 Chrome 中可能无法正常工作。

阅读更多：CSS 教程

问题背景

position: sticky 是通过将元素固定在容器的特定位置来实现的。当元素滚动到特定位置时，将进行相对定位。这在许多情况下都能正常工作，但有时在 Chrome 中会出现问题。

问题原因

position: sticky 的工作原理是根据元素在文档流中的位置来进行计算，然后确定是否需要将其固定在容器的位置。然而，在 Chrome 中，当父容器同时设置了 transform、opacity、filter 或 will-change 等 CSS 属性时，就会导致 position: sticky 失效。这是因为这些属性会创建新的层叠上下文，破坏了元素在文档流中的位置。

解决方法

在 Chrome 中解决 position: sticky 失效的问题，可以尝试以下几种方法：

方法一：使用 JavaScript 实现 sticky 效果

在一些特殊情况下，可以通过 JavaScript 来实现 sticky 效果，取代 position: sticky。可以使用 Intersection Observer API 来检测元素是否进入视口，并根据相应的状态来改变元素的定位。

示例代码如下：

const element = document.getElementById("sticky-element");

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.intersectionRatio > 0) {
      element.classList.add("sticky");
    } else {
      element.classList.remove("sticky");
    }
  });
});

observer.observe(element);

方法二：避免使用引起 position: sticky 失效的属性

如果在元素的父容器中避免使用 transform、opacity、filter 或 will-change 等属性，就可以避免 position: sticky 失效的问题。如果确实需要使用这些属性，可以考虑将它们应用到子元素或伪元素上。

方法三：设置父容器的 z-index

在一些情况下，设置父容器的 z-index 可以解决 position: sticky 失效的问题。为父容器添加一个较高的 z-index 值，以确保它在层叠上下文中处于较高的层级。

示例代码如下：

.parent-container {
  position: relative;
  z-index: 1;
}

.sticky-element {
  position: sticky;
  top: 0;
}

总结

在使用 position: sticky 时，如果在 Chrome 中遇到失效的问题，可以尝试使用 JavaScript 实现 sticky 效果，避免使用引起 position: sticky 失效的属性，或为父容器设置 z-index。这些方法可以解决大部分情况下的问题，使 position: sticky 在 Chrome 中正常工作。希望本文对你理解为什么 Chrome 中的 position: sticky 不起作用有所帮助。