实现滚动时标题文字垂直上移并同步缩放的交互动画

本文详解如何通过原生 JavaScript 监听滚动事件，动态调整元素的 top 位置与 font-size，实现平滑的垂直上升+渐变缩放视觉效果，兼顾性能与兼容性。

本文详解如何通过原生 javascript 监听滚动事件，动态调整 `

` 元素的 `top` 位置与 `font-size`，实现平滑的垂直上升+渐变缩放视觉效果，兼顾性能与兼容性。

要让标题文字在页面滚动过程中同时向上移动并缩小字号，关键在于将滚动进度（0%–100%）映射为两个独立但协调变化的 CSS 属性：top（控制垂直位移）和 font-size（控制尺寸缩放）。以下是一个结构清晰、可直接复用的完整实现方案。

✅ 核心思路：基于滚动百分比驱动动画

我们不直接使用 window.scrollY（像素值），而是计算滚动进度百分比（scrolled），它更稳定、响应视口高度变化，且便于线性映射：

function updateTextPosition() {
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
  const scrolled = (scrollTop / scrollHeight) * 100; // 0 ~ 100

  const h1 = document.querySelector('h1');
  // 向上移动：从 50% → 0%，即 top = 50% - (scrolled / 2)
  h1.style.top = `${50 - scrolled / 2}%`;
  // 缩放字体：从 300px → 50px，线性衰减（300 - scrolled × 2.5）
  h1.style.fontSize = `${Math.max(50, 300 - scrolled * 2.5)}px`;
}

// 使用节流优化性能（推荐）
let ticking = false;
window.addEventListener('scroll', () => {
  if (!ticking) {
    requestAnimationFrame(() => {
      updateTextPosition();
      ticking = false;
    });
    ticking = true;
  }
});

?️ 必备 CSS 设置（确保定位生效）

position: fixed 是实现视口内自由定位的前提，配合 transform: translate(-50%, -50%) 实现精准居中锚点：

h1 {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-weight: 900;
  color: #18408B;
  text-shadow: 0 0 12px rgba(0,0,0,0.2);
  transition: none; /* 禁用过渡，由 JS 完全控制 */
}

⚠️ 注意事项：

避免 body { height: 100vh } 类限制：确保页面有足够滚动高度（如 min-height: 150vh），否则 scrollHeight 过小会导致 scrolled 值突变；

Math.max(50, ...) 防止字体过小：保证最小字号不低于 50px，提升可读性；

禁用 transition：JS 动态设置样式时启用 CSS 过渡会引发卡顿或冲突；

移动端适配：window.pageYOffset 在 iOS Safari 中更可靠，已包含兼容写法。

✅ 最终 HTML 结构建议（精简可靠）

  <h1>NBA</h1>
  <!-- 内容区域（提供滚动空间） -->
  <div style="height: 200vh; padding: 8rem 1rem; color: white;">
    <p>向下滚动，观察标题的垂直上升与缩放动画...</p>
  </div>

此方案无需第三方库，纯原生实现，性能优异，且逻辑透明易调试。通过统一基于滚动百分比的计算模型，你还可以轻松扩展其他属性（如 opacity、rotate），构建更丰富的视差动效系统。