分析 CSS sticky 元素跨父级滚动区域的定位问题 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

CSS Sticky 元素跨父级滚动区域的定位问题

大家好，今天我们来深入探讨一个 CSS 中比较棘手但又非常实用的特性：position: sticky。特别是当 sticky 元素需要跨越多个父级滚动容器时，它的行为会变得更加复杂，也更容易出现一些意想不到的问题。本次讲座将从 sticky 的基本原理出发，逐步分析其在嵌套滚动容器中的表现，并通过具体的代码示例，帮助大家理解并解决这类定位问题。

1. position: sticky 的基本原理

position: sticky 允许元素在滚动到特定位置之前表现得像 position: relative 元素，滚动到指定位置后则表现得像 position: fixed 元素。简单来说，它会在滚动到指定阈值时 "粘住" 在屏幕上。

要使 position: sticky 生效，必须满足以下几个条件：

指定阈值： 必须设置 top、right、bottom 或 left 属性中的至少一个，用于定义元素何时 "粘住"。
滚动容器： 元素必须存在于一个滚动容器内。这个滚动容器可以是 overflow: auto、overflow: scroll、overflow-x: auto、overflow-y: scroll 的元素，甚至是根元素 <html> (当整个页面滚动时)。
父元素高度： sticky 元素不会超过其父元素的高度。如果父元素的高度小于 sticky 元素本身加上 top 和 bottom 的值，那么 sticky 元素可能无法完全 "粘住"。
无 overflow: hidden： sticky 元素的任何父元素都不能设置 overflow: hidden，因为它会阻止 sticky 效果。

示例：

<div style="height: 200px; overflow-y: scroll;">
  <div style="height: 50px; background-color: lightblue; position: sticky; top: 0;">
    Sticky Header
  </div>
  <div style="height: 500px;">
    Content
  </div>
</div>

在这个例子中，Sticky Header 会在滚动到容器顶部时 "粘住"。

2. 嵌套滚动容器中的 Sticky 行为

当 sticky 元素位于嵌套的滚动容器中时，它的行为会受到所有父级滚动容器的影响。这也是最容易出现问题的地方。 sticky 元素会尝试相对于最近的滚动容器进行定位。

示例：

<div style="height: 300px; overflow-y: scroll; border: 1px solid black;">
  <div style="height: 200px; overflow-y: scroll; border: 1px solid red;">
    <div style="height: 50px; background-color: lightblue; position: sticky; top: 0;">
      Sticky Header
    </div>
    <div style="height: 500px;">
      Content
    </div>
  </div>
  <div style="height: 500px;">
    More Content in Outer Scroll
  </div>
</div>

在这个例子中，Sticky Header 会相对于红色边框的内部滚动容器进行定位，而不是外部的黑色边框容器。也就是说，只有在内部滚动容器滚动到顶部时，Sticky Header 才会 "粘住"。当内部滚动容器已经滚动到顶部并 "粘住" 后，继续滚动外部滚动容器， Sticky Header 会随着内部滚动容器一起滚动，最终离开屏幕。

3. 跨父级滚动区域的定位问题与解决方案

现在，我们来探讨如何让 sticky 元素跨越多个父级滚动区域，使其相对于更外层的滚动容器进行定位。这需要一些技巧和对 sticky 行为的深入理解。

问题描述：

假设我们希望在上述嵌套滚动容器的例子中，Sticky Header 相对于黑色边框的外部滚动容器进行定位。也就是说，无论内部滚动容器是否滚动到顶部，只要外部滚动容器滚动到一定位置，Sticky Header 就应该 "粘住"。

解决方案 1：移除内部滚动容器

最简单的方法是移除内部滚动容器。如果业务逻辑允许，这是最直接的解决方案。

<div style="height: 300px; overflow-y: scroll; border: 1px solid black;">
  <div style="height: 700px; border: 1px solid red;">  <!-- 移除 overflow-y: scroll -->
    <div style="height: 50px; background-color: lightblue; position: sticky; top: 0;">
      Sticky Header
    </div>
    <div style="height: 500px;">
      Content
    </div>
  </div>
  <div style="height: 500px;">
    More Content in Outer Scroll
  </div>
</div>

现在，Sticky Header 会相对于外部滚动容器进行定位。但是，这种方法的局限性在于，它改变了原有的滚动结构。

解决方案 2：使用 JavaScript 监听滚动事件并手动控制 Sticky 效果

如果必须保留内部滚动容器，那么我们需要使用 JavaScript 来监听外部滚动容器的滚动事件，并手动控制 Sticky Header 的 position 属性。

<div id="outer-scroll" style="height: 300px; overflow-y: scroll; border: 1px solid black; position: relative;">
  <div id="inner-scroll" style="height: 200px; overflow-y: scroll; border: 1px solid red;">
    <div id="sticky-header" style="height: 50px; background-color: lightblue; position: relative; top: 0;">
      Sticky Header
    </div>
    <div style="height: 500px;">
      Content
    </div>
  </div>
  <div style="height: 500px;">
    More Content in Outer Scroll
  </div>
</div>

<script>
  const outerScroll = document.getElementById('outer-scroll');
  const innerScroll = document.getElementById('inner-scroll');
  const stickyHeader = document.getElementById('sticky-header');

  outerScroll.addEventListener('scroll', () => {
    const outerScrollTop = outerScroll.scrollTop;
    const innerScrollTop = innerScroll.scrollTop;
    const stickyHeaderOffsetTop = stickyHeader.offsetTop; // 距离最近的position不为static的父元素顶部的距离

    // 假设我们希望在外部滚动容器滚动到 50px 时，Sticky Header "粘住"
    const stickyThreshold = 50;

    if (outerScrollTop >= stickyThreshold) {
      stickyHeader.style.position = 'fixed';
      stickyHeader.style.top = '0'; // 固定在视口顶部
      stickyHeader.style.left = outerScroll.offsetLeft + 'px'; // 保持水平位置
      stickyHeader.style.width = innerScroll.offsetWidth + 'px'; // 保持宽度
    } else {
      stickyHeader.style.position = 'relative';
      stickyHeader.style.top = '0';
      stickyHeader.style.left = 'auto';
      stickyHeader.style.width = 'auto';
    }
  });

  // 解决内部滚动容器影响 Sticky Header 的问题
  innerScroll.addEventListener('scroll', (event) => {
    event.stopPropagation(); // 阻止事件冒泡，防止内部滚动容器触发外部滚动容器的滚动事件
  });
</script>

代码解释：

获取元素： 使用 document.getElementById 获取外部滚动容器、内部滚动容器和 sticky 元素。
监听滚动事件： 监听外部滚动容器的 scroll 事件。
计算滚动距离： 获取外部滚动容器的滚动距离 outerScrollTop。
设置阈值： 定义一个阈值 stickyThreshold，当外部滚动容器滚动到该阈值时，sticky 元素 "粘住"。
手动控制 position 属性：
- 当 outerScrollTop 大于等于 stickyThreshold 时，将 stickyHeader 的 position 设置为 fixed，并设置 top 为 0，使其固定在视口顶部。
- 为了保证水平位置，我们需要设置 left 为外部滚动容器的 offsetLeft。
- 为了保证宽度，我们需要设置 width 为内部滚动容器的 offsetWidth。
- 否则，将 stickyHeader 的 position 设置为 relative，并重置 top 和 left 属性。
阻止事件冒泡： 监听内部滚动容器的 scroll 事件，并调用 event.stopPropagation() 阻止事件冒泡。这可以防止内部滚动容器的滚动影响外部滚动容器的滚动事件。

优点：

可以保留内部滚动容器的滚动结构。
可以精确控制 sticky 元素的行为。

缺点：

需要编写 JavaScript 代码。
需要手动计算 sticky 元素的 top 和 left 属性。
需要考虑各种边界情况。

解决方案 3：使用 Intersection Observer API

Intersection Observer API 是一种更现代、更高效的监听元素是否进入或离开视口的 API。我们可以使用它来判断外部滚动容器是否滚动到特定位置，然后手动控制 sticky 元素的状态。

<div id="outer-scroll" style="height: 300px; overflow-y: scroll; border: 1px solid black; position: relative;">
  <div id="inner-scroll" style="height: 200px; overflow-y: scroll; border: 1px solid red;">
    <div id="sticky-header" style="height: 50px; background-color: lightblue; position: relative; top: 0;">
      Sticky Header
    </div>
    <div style="height: 500px;">
      Content
    </div>
  </div>
  <div style="height: 500px;">
    More Content in Outer Scroll
  </div>
  <div id="threshold" style="position: absolute; top: 50px; left: 0; width: 100%; height: 1px; background-color: transparent;"></div>
</div>

<script>
  const outerScroll = document.getElementById('outer-scroll');
  const innerScroll = document.getElementById('inner-scroll');
  const stickyHeader = document.getElementById('sticky-header');
  const threshold = document.getElementById('threshold');

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (!entry.isIntersecting) {
        // threshold 离开视口，表示外部滚动容器滚动到阈值位置
        stickyHeader.style.position = 'fixed';
        stickyHeader.style.top = '0';
        stickyHeader.style.left = outerScroll.offsetLeft + 'px';
        stickyHeader.style.width = innerScroll.offsetWidth + 'px';
      } else {
        // threshold 进入视口
        stickyHeader.style.position = 'relative';
        stickyHeader.style.top = '0';
        stickyHeader.style.left = 'auto';
        stickyHeader.style.width = 'auto';
      }
    });
  }, {
    root: outerScroll, // 指定滚动容器
    rootMargin: '0px',
    threshold: 0 // 当 threshold 完全离开或进入视口时触发
  });

  observer.observe(threshold);

  // 解决内部滚动容器影响 Sticky Header 的问题
  innerScroll.addEventListener('scroll', (event) => {
    event.stopPropagation(); // 阻止事件冒泡，防止内部滚动容器触发外部滚动容器的滚动事件
  });
</script>

代码解释：

添加阈值元素： 在外部滚动容器中添加一个 threshold 元素，用于标记阈值位置。这里将其 top 设置为 50px，表示当外部滚动容器滚动到 50px 时，threshold 元素将离开视口。
创建 Intersection Observer： 创建一个 IntersectionObserver 实例，并指定 root 为外部滚动容器，threshold 为 0。这意味着当 threshold 元素完全离开或进入视口时，会触发回调函数。
监听 Intersection Observer 事件： 在回调函数中，判断 entry.isIntersecting 的值。
- 如果 entry.isIntersecting 为 false，表示 threshold 元素离开了视口，说明外部滚动容器滚动到了阈值位置，此时将 stickyHeader 的 position 设置为 fixed。
- 如果 entry.isIntersecting 为 true，表示 threshold 元素进入了视口，此时将 stickyHeader 的 position 设置为 relative。
观察阈值元素： 调用 observer.observe(threshold) 开始观察 threshold 元素。
阻止事件冒泡： 监听内部滚动容器的 scroll 事件，并调用 event.stopPropagation() 阻止事件冒泡。

优点：

性能比监听 scroll 事件更高，因为只有在元素进入或离开视口时才会触发回调函数。
代码更简洁。

缺点：

需要添加一个额外的阈值元素。
兼容性不如监听 scroll 事件。

4. 更复杂的场景：多个嵌套滚动容器和不同的滚动方向

以上示例主要针对简单的嵌套滚动容器和垂直滚动方向。在更复杂的场景中，例如多个嵌套滚动容器和不同的滚动方向（水平和垂直混合），sticky 元素的行为会更加难以预测。

建议：

尽量避免过于复杂的滚动结构。
如果必须使用复杂的滚动结构，建议使用 JavaScript 手动控制 sticky 元素的行为，或者使用 Intersection Observer API。
仔细测试各种边界情况。

表格：各种解决方案的对比

解决方案	优点	缺点	适用场景
移除内部滚动容器	最简单，性能最高	改变了原有的滚动结构	业务逻辑允许移除内部滚动容器
JavaScript 监听滚动事件	可以保留内部滚动容器的滚动结构，可以精确控制 sticky 元素的行为	需要编写 JavaScript 代码，需要手动计算 sticky 元素的 `top` 和 `left` 属性，需要考虑各种边界情况	必须保留内部滚动容器，并且需要精确控制 sticky 元素的行为
Intersection Observer API	性能比监听 `scroll` 事件更高，代码更简洁	需要添加一个额外的阈值元素，兼容性不如监听 `scroll` 事件	对性能有要求，并且可以接受添加一个额外的阈值元素

最终建议

选择哪种方案取决于你的具体需求和项目约束。如果可以避免复杂的滚动结构，那么尽量避免。如果必须使用复杂的滚动结构，那么请仔细测试各种边界情况，并选择最适合你的解决方案。

希望今天的讲解对大家有所帮助。谢谢！

精简概括

position: sticky 在嵌套滚动容器中定位复杂，通常相对于最近的滚动容器生效。解决跨父级定位问题，可以移除内部滚动容器、使用 JavaScript 监听滚动并手动控制，或利用 Intersection Observer API。选择方案需考虑需求、性能和兼容性。

CSS Sticky 元素跨父级滚动区域的定位问题

发表回复 取消回复

发表回复取消回复