如何实现滚动时H1文本垂直上移且字号从300px变50px？[HTML,CSS,JS]

要实现滚动时H1文本同时缩放和垂直上移，只需在现有代码基础上添加位移计算逻辑即可，具体修改如下：

1. 修改JavaScript代码 #

在滚动事件监听中，除了计算字号变化，增加垂直位移的计算逻辑。我们使用transform: translateY()实现位移（相比直接修改top属性性能更优）：

const text = document.querySelector('h1');

window.addEventListener('scroll', () => {
    const current = window.scrollY;
    const maxFontSize = 300;
    const minFontSize = 50;
    // 计算字号：确保不小于最小值
    const fontSize = Math.max(minFontSize, maxFontSize - current);
    text.style.fontSize = `${fontSize}px`;

    // 配置位移参数：可根据需求调整最大上移距离
    const maxUpwardMove = -200; // 向上最多移动200px，负数表示向上
    const scrollThreshold = maxFontSize - minFontSize; // 触发变化的最大滚动距离（250px）
    
    // 计算当前位移：滚动距离未超过阈值时，随滚动逐渐上移；超过阈值后保持最大位移
    const translateY = Math.max(maxUpwardMove, 0 - (current * Math.abs(maxUpwardMove) / scrollThreshold));
    text.style.transform = `translateY(${translateY}px)`;
});

2. 可选：优化CSS（添加平滑过渡） #

如果希望动画更自然，可以给H1添加过渡效果，让字号和位移变化更平滑：

h1 {
    font-size: 300px;
    transition: all 0.1s ease-out; /* 添加过渡动画 */
}

逻辑说明 #

• 字号逻辑：保持原有逻辑，滚动时从300px逐步缩小到50px，之后不再变化
• 位移逻辑：根据滚动距离同步计算上移距离，当滚动到250px（字号达到最小值）时，H1向上移动到最大距离（200px），之后保持该位置
• 性能优化：使用transform而非top属性，避免触发页面重排，提升滚动流畅度

内容的提问来源于stack exchange，提问作者Dimitri Saha