多个div到达视口顶部时的异常检测问题（CSS类定义时触发）

CSS原生方案（优先推荐） #

直接用position: sticky就能搞定，完全不用JS，还能避免文档流塌陷的问题：

.sticky-box {
  position: sticky;
  top: 0;
  background: #fff;
  padding: 10px;
  border-bottom: 1px solid #eee;
}
/* 让后续盒子依次堆叠在前面的盒子下方，根据实际高度调整top值 */
.sticky-box:nth-child(2) {
  top: 50px; /* 假设第一个盒子高度为50px */
}
.sticky-box:nth-child(3) {
  top: 100px; /* 前两个盒子高度总和 */
}

• 原理：sticky元素不会脱离文档流，滚动到指定位置时才固定，后续元素不会因为前面的元素固定而上移，从根源解决你遇到的触发条件混乱问题。
• 注意：父元素不能加overflow: hidden这类截断滚动的属性，否则sticky会失效。

JavaScript实现方案（适用于特殊需求场景） #

如果必须用JS，核心是给每个固定元素加占位符容器，固定时用占位符保留原元素高度，防止文档流塌陷：

1. HTML结构 #

给每个要固定的盒子套一层占位符：

<div class="sticky-placeholder">
  <div class="sticky-box">文本框1</div>
</div>
<div class="sticky-placeholder">
  <div class="sticky-box">文本框2</div>
</div>
<div class="sticky-placeholder">
  <div class="sticky-box">文本框3</div>
</div>

2. CSS样式 #

.sticky-box {
  padding: 10px;
  background: #fff;
  border-bottom: 1px solid #eee;
}
.fixed {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 10;
}
.sticky-placeholder {
  display: none;
}
.sticky-placeholder.active {
  display: block;
}

3. JS逻辑 #

const placeholders = document.querySelectorAll('.sticky-placeholder');
const boxes = document.querySelectorAll('.sticky-box');

// 预存每个盒子的初始位置和高度
const stickyData = Array.from(placeholders).map((placeholder, idx) => {
  const box = boxes[idx];
  return {
    placeholder,
    box,
    offsetTop: box.offsetTop,
    height: box.offsetHeight
  };
});

function handleScroll() {
  const scrollTop = window.scrollY;

  stickyData.forEach((data, idx) => {
    const { placeholder, box, offsetTop, height } = data;
    // 计算当前盒子的固定范围：到下一个盒子即将固定的位置为止
    const nextStop = idx < stickyData.length - 1 
      ? stickyData[idx + 1].offsetTop - height 
      : Infinity;

    if (scrollTop >= offsetTop && scrollTop < nextStop) {
      box.classList.add('fixed');
      placeholder.classList.add('active');
      placeholder.style.height = `${height}px`;
      
      // 计算当前盒子的top值，让它堆叠在前面固定盒子的下方
      let totalTop = 0;
      for (let i = 0; i < idx; i++) {
        if (stickyData[i].box.classList.contains('fixed')) {
          totalTop += stickyData[i].height;
        }
      }
      box.style.top = `${totalTop}px`;
    } else {
      box.classList.remove('fixed');
      placeholder.classList.remove('active');
      box.style.top = '';
    }
  });
}

// 滚动节流优化性能
let throttleTimer;
window.addEventListener('scroll', () => {
  if (!throttleTimer) {
    throttleTimer = setTimeout(() => {
      handleScroll();
      throttleTimer = null;
    }, 16);
  }
});

// 窗口 resize 时重新计算位置和高度
window.addEventListener('resize', () => {
  stickyData.forEach((data, idx) => {
    data.offsetTop = data.box.offsetTop;
    data.height = data.box.offsetHeight;
  });
});

• 核心解决点：占位符保留原元素高度，避免固定后文档流塌陷；动态计算每个固定盒子的top值，确保依次堆叠；回滚时自动移除固定状态，不会出现布局混乱。

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