` 在页面滚动时平滑上移并同步缩小字体（300px→50px），营造视差与聚焦效果。

要实现滚动过程中

文字垂直上移 + 字体渐变缩小的双重动画效果，关键在于：
✅ 使用 position: fixed 确保元素脱离文档流、独立定位；
✅ 利用 scrollY（或兼容性更强的 scrollTop）获取滚动进度；
✅ 将滚动距离映射为 top 偏移量与 font-size 值，实现线性过渡；
✅ 配合 transform: translate(-50%, -50%) 实现精准居中，避免因 top 变化导致抖动。

以下是优化后的完整实现方案（兼容现代浏览器，含防抖与边界保护）：

HTML（添加 ID 并精简结构）：

  <div class="container">
    <h1 id="scrollingTitle">NBA</h1>
  </div>
  <!-- 确保页面有足够高度以触发滚动 -->
  <div style="height: 200vh; background: #000;"></div>

CSS（核心定位与基础样式）：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: black;
  overflow-x: hidden;
}

#scrollingTitle {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 300px;
  color: #18408B;
  font-weight: 900;
  text-shadow: 0 0 20px rgba(24, 64, 139, 0.4);
  z-index: 10;
  margin: 0;
  line-height: 1;
}

JavaScript（健壮的滚动响应逻辑）：

const title = document.getElementById('scrollingTitle');
const maxFontSize = 300;
const minFontSize = 50;
const maxTopPercent = 50; // 初始居中位置（top: 50%）
const minTopPercent = -20; // 滚动到底部时上移至顶部上方

// 防抖函数（避免高频触发影响性能）
function debounce(fn, delay) {
  let timer;
  return () => {
    clearTimeout(timer);
    timer = setTimeout(fn, delay);
  };
}

function updateTitlePosition() {
  const scrollY = window.scrollY;
  const docHeight = document.documentElement.scrollHeight - window.innerHeight;
  const scrollProgress = docHeight > 0 ? Math.min(scrollY / docHeight, 1) : 0;

  // 计算字体大小：300px → 50px 线性衰减
  const fontSize = Math.max(minFontSize, maxFontSize - scrollProgress * (maxFontSize - minFontSize));

  // 计算垂直位置：从 50% 上移至 -20%，增强视觉上升感
  const topPos = maxTopPercent - scrollProgress * (maxTopPercent - minTopPercent);

  title.style.fontSize = `${fontSize}px`;
  title.style.top = `${topPos}%`;
}

// 监听滚动，使用防抖提升性能
window.addEventListener('scroll', debounce(updateTitlePosition, 16)); // ~60fps
updateTitlePosition(); // 初始化位置

? 注意事项：