如何让容器触碰到指定元素后取消sticky定位

我希望当粉色container3触碰到绿色container2的底部时，取消蓝色container1的sticky定位，请问该需求是否可以实现？我尝试过但未能达成目标。

相关代码 #

CSS代码

.container1 {
  width: 500px;
  height: 400px;
  background-color: lightblue;
  text-align: center;
  margin: 0px auto;
  position: sticky;
  top: 0;
  z-index: -1;
}

.container2 {
  width: 300px;
  height: 200px;
  background-color: lightgreen;
  text-align: center;
  margin: 0px auto;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
}

.container3 {
  width: 500px;
  height: 400px;
  background-color: pink;
  text-align: center;
  margin: 20px auto;
}

HTML代码

<div class="container1">
  <div class="container2">
  </div>
</div>
<div class="container3">
</div>

这个需求完全可以实现，核心是通过监听滚动事件，实时计算两个容器的位置关系，动态修改container1的定位属性。

实现逻辑 #

1. 获取三个容器的DOM节点
2. 用getBoundingClientRect()方法分别计算container2的底部坐标、container3的顶部坐标（均相对于当前视口）
3. 滚动时对比两个坐标：当container3顶部触碰到container2底部时，将container1的定位改为static；否则恢复sticky定位

完整实现代码 #

在原有代码基础上添加以下JavaScript：

const container1 = document.querySelector('.container1');
const container2 = document.querySelector('.container2');
const container3 = document.querySelector('.container3');

function updateContainerPosition() {
  const container2Bottom = container2.getBoundingClientRect().bottom;
  const container3Top = container3.getBoundingClientRect().top;

  if (container3Top <= container2Bottom) {
    container1.style.position = 'static';
  } else {
    container1.style.position = 'sticky';
    container1.style.top = '0';
  }
}

// 页面加载时先执行一次检查
updateContainerPosition();
// 监听滚动事件触发位置检查
window.addEventListener('scroll', updateContainerPosition);

注意事项 #

• 由于container2是绝对定位在container1内部，getBoundingClientRect()会自动计算其相对于视口的真实位置，无需额外处理父元素偏移
• 如果页面使用局部滚动容器，需将滚动监听绑定到对应容器而非window
• 可给container1添加过渡动画优化体验：transition: all 0.3s ease;

内容的提问来源于stack exchange，提问作者John