如何实现粘性元素重叠时下层元素透明度置0？

问题根源 #

你的代码存在三个核心问题导致功能失效：

• 错误选取了<ol>容器（.float类）而非每个粘性<li>元素，JS遍历对象完全错误
• 依赖滚动位置与offsetTop的关系判断，无法准确检测元素重叠状态
• CSS的.hidden类用display: none直接隐藏元素，既不符合「透明度变为0」的需求，还会破坏粘性布局

修正方案 #

1. 调整HTML结构

给每个粘性<li>添加统一类名sticky-item，方便JS精准定位：

<section>
  <title>Sticky Elements Example</title>
  <ol class="float">
    <li id="alpha" class="sticky-item"> α </li>
    <li id="beta" class="sticky-item"> β </li>
    <li id="gamma" class="sticky-item"> γ </li>
    <li id="delta" class="sticky-item"> δ </li>
    <li id="epsilon" class="sticky-item"> ε </li>
    <li id="zeta" class="sticky-item"> ζ </li>
    <li id="eta" class="sticky-item"> η </li>
    <li id="A" class="sticky-item"> b </li>
  </ol>
</section>

2. 修改CSS样式

将.hidden改为修改透明度，保留元素布局；同时调整容器样式避免float干扰粘性定位：

.float {
  list-style: none;
  margin: 0;
  padding: 0;
  position: fixed;
  right: calc(100vw / 19.8);
}

.sticky-item {
  font-family: classic_roman_stdlight;
  font-size: calc(100vw / 25);
  color: hsl(228, 89%, 93%);
  opacity: 1;
  z-index: 1;
  transition: opacity 0.3s ease;
}

.hidden {
  opacity: 0; /* 仅修改透明度，不破坏布局 */
}

#alpha {
  position: sticky;
  top: calc(100vw / 7.51);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.12);
  margin-top: calc(100vw / 7.51);
}

#beta, #gamma, #delta, #epsilon, #zeta, #eta, #A {
  margin-top: calc(100vw / 1.72);
  position: sticky;
  top: calc(100vw / 7.3);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.12);
}

#A {
  color: white;
}

3. 重写JavaScript逻辑

改用getBoundingClientRect()检测元素重叠状态，从下往上遍历确保下层元素被覆盖时触发透明度变化：

document.addEventListener('DOMContentLoaded', function() {
  const stickyItems = Array.from(document.querySelectorAll('.sticky-item'));

  function checkOverlaps() {
    // 从最后一个元素往前遍历，检测是否被上方元素覆盖
    for (let i = stickyItems.length - 1; i > 0; i--) {
      const current = stickyItems[i];
      const above = stickyItems[i - 1];
      
      const currentRect = current.getBoundingClientRect();
      const aboveRect = above.getBoundingClientRect();
      
      // 判断垂直方向是否重叠
      const isOverlapped = currentRect.top < aboveRect.bottom;
      
      current.classList.toggle('hidden', isOverlapped);
    }
  }

  // 监听滚动和窗口 resize 事件
  window.addEventListener('scroll', checkOverlaps);
  window.addEventListener('resize', checkOverlaps);
  // 页面加载时初始化检测
  checkOverlaps();
});

核心改进点 #

• 用getBoundingClientRect()获取实时位置，精准判断元素重叠
• 从下往上遍历，确保下层元素被上层覆盖时切换透明度
• 保留元素布局（不使用display: none），避免粘性定位失效
• 添加过渡动画和resize监听，提升体验与适配性

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