` 元素的 `top` 位置和 `font-size`，可实现文字随页面滚动向上平移并同步缩小的视觉效果，适用于沉浸式首屏标题动画。

要实现滚动时

文字垂直上移 + 字号渐变的联动效果，关键在于：

将文字设为 position: fixed，脱离文档流以精准控制位移；

使用 scrollY（或兼容性写法）计算滚动进度百分比，作为动画参数；

同步驱动两个 CSS 属性：top（控制垂直位置）和 font-size（控制大小）。

以下是优化后的完整实现方案：

✅ 推荐代码（现代、健壮、易维护）

HTML（为

添加唯一 ID，便于选择）：

<div class="container">
  <div class="heading">
    <h1 id="scrollingTitle">NBA</h1>
  </div>
</div>

CSS（核心定位与初始样式）：

h1#scrollingTitle {
  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);
  /* 初始状态：居中显示，字号300px */
  font-size: 300px;
  transition: none; /* 禁用过渡，由JS完全控制动画更流畅 */
}

JavaScript（响应式滚动计算，含边界保护）：

const title = document.getElementById('scrollingTitle');

// 防抖优化（可选，提升性能）
let ticking = false;
const updateTitle = () => {
  const scrollY = window.scrollY;
  const maxScroll = document.body.scrollHeight - window.innerHeight;

  // 归一化滚动进度：0 → 100%
  const progress = Math.min(100, (scrollY / maxScroll) * 100);

  // 垂直上移：从 50% → 10%（即向上移动40%视口高度）
  title.style.top = `${50 - progress * 0.4}%`;

  // 字号缩放：300px → 50px（线性衰减）
  const fontSize = Math.max(50, 300 - progress * 2.5);
  title.style.fontSize = `${fontSize}px`;
};

window.addEventListener('scroll', () => {
  if (!ticking) {
    requestAnimationFrame(() => {
      updateTitle();
      ticking = false;
    });
    ticking = true;
  }
});

// 初始化（防止首屏渲染错位）
updateTitle();

⚠️ 注意事项

避免 position: fixed 与 transform: translate() 冲突：本方案使用 top + left + transform 组合，确保居中基准稳定；若仅靠 top 调整，需配合 left: 50% 和 transform: translateX(-50%) 保持水平居中。
边界安全：Math.max(50, ...) 和 Math.min(100, ...) 防止字号负值或 top 超出可视范围。
性能优先：使用 requestAnimationFrame 替代直接在 scroll 中执行，避免丢帧；禁用 transition 保证 JS 控制的动画节奏精准。
移动端兼容：document.body.scrollTop 在部分 iOS 版本中不可靠，统一使用 window.scrollY（现代浏览器全支持，旧版可加 || document.documentElement.scrollTop 兜底）。