如何让粘性div在同级元素上方停止固定？

纯CSS方案（适用于元素高度固定的场景） #

如果你的middle和第二个div的高度是固定值，可以利用position: sticky的bottom属性限制粘性元素的固定范围，让它在同级元素顶部到达视口时停止固定：

假设HTML结构如下：

<div class="container">
  <div class="sticky-top">第一个div（需要粘性固定）</div>
  <div class="middle">middle div</div>
</div>
<div class="container">
  <div class="sticky-middle">middle div（需要粘性固定）</div>
  <div class="bottom">第二个div</div>
</div>

对应CSS代码：

.sticky-top {
  position: sticky;
  top: 0;
  /* 设置bottom值为middle元素的高度，让粘性元素在middle顶部到达视口时停止固定 */
  bottom: 200px; /* 假设middle高度为200px */
  background: #ccc;
}

.sticky-middle {
  position: sticky;
  top: 0;
  /* 设置bottom值为第二个div的高度 */
  bottom: 300px; /* 假设第二个div高度为300px */
  background: #eee;
}

/* 滚动场景模拟样式 */
.container {
  margin-bottom: 500px;
}
.middle {
  height: 200px;
  background: #999;
}
.bottom {
  height: 300px;
  background: #666;
}

原理：position: sticky的bottom属性定义了粘性元素与父容器底部的最小距离，当父容器滚动到该距离阈值时，粘性元素会停止固定，刚好对应同级元素顶部到达视口的位置。

JavaScript方案（适用于动态高度场景） #

如果元素高度不固定，纯CSS无法实现，需要通过监听滚动事件动态控制元素的固定状态：

代码实现 #

<div class="container">
  <div class="sticky-top" id="stickyTop">第一个div（需要粘性固定）</div>
  <div class="middle" id="middle">middle div</div>
</div>
<div class="container">
  <div class="sticky-middle" id="stickyMiddle">middle div（需要粘性固定）</div>
  <div class="bottom" id="bottom">第二个div</div>
</div>

/* 基础样式 */
.sticky-top, .sticky-middle {
  background: #ccc;
}
.sticky-middle {
  background: #eee;
}
.container {
  margin-bottom: 500px;
}
.middle, .bottom {
  /* 模拟动态高度，可替换为实际内容 */
  min-height: 200px;
  background: #999;
}
.bottom {
  background: #666;
}

/* 固定类 */
.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

// 获取DOM节点
const stickyTop = document.getElementById('stickyTop');
const middle = document.getElementById('middle');
const stickyMiddle = document.getElementById('stickyMiddle');
const bottom = document.getElementById('bottom');

// 滚动处理逻辑
function handleScroll() {
  // 控制第一个粘性元素
  const middleTop = middle.getBoundingClientRect().top;
  stickyTop.classList.toggle('fixed', middleTop > 0);

  // 控制middle粘性元素
  const bottomTop = bottom.getBoundingClientRect().top;
  stickyMiddle.classList.toggle('fixed', bottomTop > 0);
}

// 初始化执行一次
handleScroll();

// 添加事件监听
window.addEventListener('scroll', handleScroll);
window.addEventListener('resize', handleScroll);

优化说明 #

• 使用getBoundingClientRect()获取元素相对视口的位置，精准判断触发时机
• 监听窗口大小变化，避免布局调整导致的位置计算错误
• 通过classList.toggle()简化固定状态的切换逻辑，减少代码冗余

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