响应式网站两个JavaScript滚动动画无法按需运行的问题求助

你的问题核心出在两个致命冲突点：

1. 两个脚本共用了全局变量prevScrollpos，后加载的脚本会直接覆盖前一个的变量值，导致滚动逻辑彻底混乱；
2. 两个脚本都直接给window.onscroll赋值，后面的函数会完全替换掉前面的滚动监听，所以永远只有最后一个脚本生效。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Whimsicss Studio - Websites for Small Businesses</title>
<style>
    /* 用CSS媒体查询先控制元素基础显示逻辑，减少JS冗余操作 */
    #navigation {
        position: fixed;
        top: 0;
        width: 100%;
        height: 70px;
        background-color: grey;
        transition: .8s;
    }
    /* 移动端直接隐藏导航 */
    @media (max-width: 449px) {
        #navigation {
            display: none;
        }
    }

    #header-button {
        display: block;
        position: fixed;
        bottom: 30vh;
        background-color: skyblue;
        width: 100px;
        height: 50px;
        border: 2px solid red;
        transition: 0.8s ease-in-out;
    }
</style>
</head>
<body>
<header style="height:1000px;">
<nav id="navigation"></nav>

<section style="margin-top: 90px;">
<h1>Websites are more than design, they’re a part of a Strategy</h1>
<a href="contact.html" class="button" id="header-button">Lets Talk!</a>
</section>  

<script>
// 定义媒体查询对象，对应设备宽度阈值
const desktopQuery = window.matchMedia('(min-width: 450px)');
const mobileQuery = window.matchMedia('(max-width: 449px)');

// 导航滚动逻辑：使用独立变量，避免全局污染
let navPrevScroll = window.pageYOffset;
function handleNavScroll() {
    const currentScroll = window.pageYOffset;
    if (navPrevScroll > currentScroll) {
        document.getElementById('navigation').style.top = '0';
    } else {
        document.getElementById('navigation').style.top = '-90px';
    }
    navPrevScroll = currentScroll;
}

// CTA滚动逻辑：独立变量管理自己的滚动历史
let ctaPrevScroll = window.pageYOffset;
function handleCTAScroll() {
    const currentScroll = window.pageYOffset;
    if (ctaPrevScroll > currentScroll) {
        document.getElementById('header-button').style.left = '0.25in';
    } else {
        document.getElementById('header-button').style.left = '-10in';
    }
    ctaPrevScroll = currentScroll;
}

// 动态绑定/解绑滚动事件的核心函数
function setupScrollHandlers() {
    // 先移除所有滚动监听，避免重复绑定
    window.removeEventListener('scroll', handleNavScroll);
    window.removeEventListener('scroll', handleCTAScroll);

    if (desktopQuery.matches) {
        // 桌面端：仅启用导航滚动
        window.addEventListener('scroll', handleNavScroll);
        // 初始化导航状态
        document.getElementById('navigation').style.top = '0';
        // 重置CTA位置
        document.getElementById('header-button').style.left = '-10in';
    } else if (mobileQuery.matches) {
        // 移动端：仅启用CTA滚动
        window.addEventListener('scroll', handleCTAScroll);
        // 初始化CTA状态
        document.getElementById('header-button').style.left = '0.25in';
    }
}

// 页面加载时初始化一次
setupScrollHandlers();

// 监听窗口大小变化，自动切换逻辑（适配窗口缩放、设备旋转）
desktopQuery.addEventListener('change', setupScrollHandlers);
mobileQuery.addEventListener('change', setupScrollHandlers);
</script>
</header>
</body>
</html>

• 变量隔离：把共用的prevScrollpos拆成独立的navPrevScroll和ctaPrevScroll，彻底避免变量冲突；
• 事件动态管理：用addEventListener/removeEventListener替代直接赋值window.onscroll，确保同一时间只有一个滚动逻辑在运行；
• 媒体查询监听：不仅初始化时判断设备宽度，还监听窗口尺寸变化，自动切换对应逻辑；
• CSS配合控制：用CSS媒体查询直接隐藏移动端导航，减少JS不必要的DOM操作，符合响应式设计最佳实践；
• 初始状态重置：每次切换设备模式时重置元素状态，避免出现显示异常。

内容的提问来源于stack exchange，提问作者Antonio Higdon