本文详解如何通过原生 JavaScript 监听滚动事件，动态调整 <h1> 元素的 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 结构建议（精简可靠）
<body style="min-height: 150vh; background: #000; margin: 0;">
<h1>NBA</h1>
<!-- 内容区域（提供滚动空间） -->
<div style="height: 200vh; padding: 8rem 1rem; color: white;">
<p>向下滚动，观察标题的垂直上升与缩放动画...</p>
</div>
</body>此方案无需第三方库，纯原生实现，性能优异，且逻辑透明易调试。通过统一基于滚动百分比的计算模型，你还可以轻松扩展其他属性（如 opacity、rotate），构建更丰富的视差动效系统。
