实现滚动驱动动画期间元素保持sticky粘性效果的问题

需求描述 #

• 元素进入视口时，逐个启动滚动驱动的旋转动画
• 三个元素需保持sticky（滚动时不消失），直到最后一个元素的动画结束
• 所有动画完成后，页面恢复正常滚动行为

现有问题 #

当前代码无法让元素在需要时保持粘性，且动画触发逻辑存在冲突。

问题分析 #

1. 粘性失效核心原因：动画元素的父容器设置了height:1000px，导致滚动祖先变为该父容器而非视口，position:sticky仅会在父容器范围内生效，超出后会跟随滚动。
2. 动画逻辑冲突：同时使用view-timeline的滚动驱动延迟和JS手动设置的animationDelay，导致动画触发时机混乱。
3. 单个元素粘性不合理：原代码给每个元素单独添加sticky类，在flex布局下无法实现整体保持粘性的效果。

修复方案 #

核心调整点 #

• 将三个动画元素放入统一容器，让容器作为sticky载体，确保整体保持粘性
• 移除父容器固定高度，让视口作为滚动参考
• 统一用JS控制动画启动时机和延迟，避免与滚动驱动timeline冲突

完整代码 #

HTML

Scroll this
<div class="sticky-container">
  <div class="animation"></div>
  <div class="animation"></div>
  <div class="animation"></div>
</div>
<div class="spacer" style="height: 1000px;"></div>

CSS

.content {
  width: 75%;
  max-width: 800px;
  margin: 0 auto;
}

p, h1 {
  font-family: Arial, Helvetica, sans-serif;
}

h1 {
  font-size: 3rem;
}

p {
  font-size: 1.5rem;
  line-height: 1.5;
}

.sticky-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  width: 100%;
  position: sticky;
  top: 10px;
  z-index: 10;
  background: #fff; /* 避免被下方内容覆盖 */
}

.animation {
  width: 200px;
  height: 200px;
  background-color: bisque;
  animation-iteration-count: 1;
  animation-name: mymove;
  animation-duration: 3s;
  animation-fill-mode: forwards; /* 保持动画结束状态 */
  animation-play-state: paused; /* 初始暂停 */
}

@keyframes mymove {
  0% {
    opacity: 1;
    transform: rotate(0deg);
  }
  100% {
    opacity: 1;
    transform: rotate(180deg);
  }
}

.as-console-wrapper { height:50px; }

JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const elements = document.querySelectorAll('.animation');
  const stickyContainer = document.querySelector('.sticky-container');
  let delay = 0;
  let completedAnimations = 0;
  const totalElements = elements.length;

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        // 逐个启动动画
        elements.forEach(el => {
          el.style.animationDelay = `${delay}s`;
          el.style.animationPlayState = 'running';
          delay += 2.5;
        });
        observer.unobserve(entry.target);
      }
    });
  }, { threshold: 0.5 });

  observer.observe(stickyContainer);

  // 监听动画结束，所有完成后移除粘性
  elements.forEach(element => {
    element.addEventListener('animationend', () => {
      completedAnimations++;
      if (completedAnimations === totalElements) {
        stickyContainer.style.position = 'static';
      }
    });
  });
});

关键修复说明 #

1. 容器级粘性：通过sticky-container包裹三个元素，确保整体在视口中保持固定，解决单个元素粘性的布局冲突
2. 滚动参考修正：移除原父容器固定高度，添加空白滚动块spacer，让视口成为滚动祖先，确保sticky正常工作
3. 动画逻辑统一：取消view-timeline的滚动驱动延迟，改用JS手动控制动画启动顺序，确保逐个触发
4. 结束状态处理：统计动画完成数量，最后一个动画结束后将容器改为静态定位，恢复正常滚动

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