如何用JavaScript实现滚动时区块重叠覆盖效果？

需求说明 #

当页面滚动到.services-section区域时，第一个「Branding」区块固定，后续「Commercials」「Strategy」等区块随滚动依次向上覆盖前一个区块，所有区块高度保持一致。

完整实现代码 #

1. HTML 结构 #

<section class="services-section">
  <div class="container">
    <!-- Title -->
    <h2 class="h1 services-section__title section-title">Services</h2>

    <div class="row services-section__row">
      <!--Item 1 -->
      <div class="services-section-item services-item">
        <!-- Title -->
        <h3 class="services-item__title">Branding</h3>

        <!-- Description -->
        <div class="services-item__desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
      </div>

      <!--Item 2 -->
      <div class="services-section-item services-item">
        <!-- Title -->
        <h3 class="services-item__title">Commercials</h3>

        <!-- Description -->
        <div class="services-item__desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
      </div>

      <!--Item 3 -->
      <div class="services-section-item services-item">
        <!-- Title -->
        <h3 class="services-item__title">Strategy</h3>

        <!-- Description -->
        <div class="services-item__desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
      </div>

    </div>

  </div>
</section>

2. CSS 样式 #

/* 基础布局 */
.services-section {
  padding: 50px 0;
  position: relative;
  min-height: 1200px; /* 预留足够滚动空间 */
}

.services-section__row {
  position: relative;
  height: 400px; /* 统一所有区块高度 */
  overflow: hidden;
}

.services-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 2rem;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 第一个区块默认固定在顶部 */
.services-item:first-child {
  position: fixed;
  top: 100px; /* 可根据页面布局调整顶部距离 */
}

3. JavaScript 逻辑 #

document.addEventListener('DOMContentLoaded', () => {
  const servicesSection = document.querySelector('.services-section');
  const servicesItems = document.querySelectorAll('.services-item');
  const itemHeight = servicesItems[0].offsetHeight;
  const sectionTop = servicesSection.offsetTop;
  const sectionTriggerBottom = sectionTop + itemHeight * servicesItems.length;

  window.addEventListener('scroll', () => {
    const scrollY = window.scrollY;

    // 滚动进入目标区域时触发覆盖效果
    if (scrollY >= sectionTop && scrollY <= sectionTriggerBottom) {
      const scrollOffset = scrollY - sectionTop;
      const activeIndex = Math.floor(scrollOffset / itemHeight);

      servicesItems.forEach((item, index) => {
        // 已被覆盖的区块向上移动对应距离
        if (index <= activeIndex) {
          item.style.transform = `translateY(-${index * itemHeight}px)`;
        } else {
          item.style.transform = 'translateY(0)';
        }

        // 第一个区块在被完全覆盖后切换为绝对定位
        if (index === 0 && activeIndex > 0) {
          item.style.position = 'absolute';
        } else if (index === 0 && activeIndex === 0) {
          item.style.position = 'fixed';
        }
      });
    } else {
      // 滚动出目标区域后重置所有区块状态
      servicesItems.forEach(item => {
        item.style.transform = 'translateY(0)';
        servicesItems[0].style.position = 'fixed';
      });
    }
  });
});

核心逻辑说明 #

• 统一高度控制：通过给父容器.services-section__row设置固定高度，确保所有子区块高度一致，为滚动计算提供基准。
• 定位与动画：利用position: fixed固定第一个区块，其余区块使用position: absolute叠加，通过修改transform: translateY()实现平滑的向上覆盖动画。
• 滚动触发判断：计算滚动距离与区块高度的比例，确定当前激活的区块索引，动态调整每个区块的位置，实现依次覆盖的效果。

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