CSS滚动与过渡动画结合技巧

• 给目标元素设置transition属性，如：transition: all 0.3s ease;
• 使用window.addEventListener('scroll', ...) 监听滚动位置
• 根据scrollTop值判断是否达到触发条件，切换类名

nav {
  background: transparent;
  transition: background 0.4s ease;
}
nav.scrolled {
  background: rgba(0, 0, 0, 0.8);
}

window.addEventListener('scroll', () => {
  const nav = document.querySelector('nav');
  if (window.scrollY > 100) {
    nav.classList.add('scrolled');
  } else {
    nav.classList.remove('scrolled');
  }
});

• 获取当前滚动进度比例（如：progress = window.scrollY / (document.body.scrollHeight - window.innerHeight)）
• 将该比例映射到CSS属性值（opacity、transform等）
• 元素本身保留transition定义，使变化不突兀

.fade-element {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

window.addEventListener('scroll', () => {
  const el = document.querySelector('.fade-element');
  const progress = Math.min(window.scrollY / 500, 1); // 最大为1
  el.style.opacity = 1 - progress;
  el.style.transform = `scale(${1 + progress * 0.2})`;
});

• 使用requestAnimationFrame控制重绘节奏
• 对scroll事件做节流处理，避免每毫秒都计算样式
• 优先使用transform和opacity做动画，它们由GPU加速，不影响布局重排
• 避免在滚动中频繁读取offsetTop、scrollHeight等引发回流的属性

let ticking = false;
window.addEventListener('scroll', () => {
  if (!ticking) {
    requestAnimationFrame(() => {
      // 执行样式更新逻辑
      updateOnScroll();
      ticking = false;
    });
    ticking = true;
  }
});