通过监听滚动事件动态调整 <h1> 元素的 top 位置和 font-size，可实现文字随页面滚动向上平移并同步缩小的视觉效果，适用于沉浸式首屏标题动画。
通过监听滚动事件动态调整 `
` 元素的 `top` 位置和 `font-size`，可实现文字随页面滚动向上平移并同步缩小的视觉效果，适用于沉浸式首屏标题动画。
要实现滚动时 <h1> 文字垂直上移 + 字号渐变的联动效果，关键在于：
- 将文字设为 position: fixed，脱离文档流以精准控制位移；
- 使用 scrollY（或兼容性写法）计算滚动进度百分比，作为动画参数；
- 同步驱动两个 CSS 属性：top（控制垂直位置）和 font-size（控制大小）。
以下是优化后的完整实现方案：
✅ 推荐代码（现代、健壮、易维护）
HTML（为 <h1> 添加唯一 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 兜底）。
✅ 效果总结
滚动过程中，标题将从视口中央平稳上浮至顶部区域，同时字号由 300px 线性缩至 50px，形成富有张力的纵深动效。该模式可灵活扩展——例如叠加 opacity 渐隐、color 渐变或添加 will-change: top, font-size 进一步优化渲染性能。
