滚动切换header背景失效：classList add/remove不生效问题咨询

问题根源 #

• CSS里 background-color: none 是无效写法，透明背景必须用 transparent
• JS操作的类名和CSS定义的类名大小写不匹配（CSS是.mystyle/.mystyle1，JS里写的myStyle/myStyle1）
• setTimeout 会导致滚动状态判断延迟，出现切换不及时的情况

修正后的完整代码 #

HTML #

<body id="Body" onscroll="checkforscroll()">
    <div class="first" id="first">
        <aside id="menu">
            ...
        </aside>
        <header id="header">
            <div class="flex common">
                <a onclick="openMenu()" class="hamburger"><img src="Images/more.png"></a>
                <a href="#first"><img src="Images/ubereats.svg"></a>
                <a class="button1" href=""><img src="Images/profile.png">Log in</a>
                <a class="button2" href="">Sign up</a>
            </div>
        </header>

CSS #

header{
    white-space: nowrap;
    position: fixed;
    top: 0;
    background-color: transparent; /* 替换无效的none为transparent */
    transition: 300ms;
    width: 100%; /* 防止fixed定位后宽度收缩，按需调整 */
}
.mystyle{
    background-color: white;
}
/* 移除多余的mystyle1类，默认样式已实现透明效果 */

JavaScript #

function checkforscroll() {
    let y = window.pageYOffset;
    const header = document.getElementById("header");
    if(y > 0){
        header.classList.add("mystyle");
        console.log("white");
    }else{
        header.classList.remove("mystyle");
        console.log("transparent");
    }
}

额外说明 #

• 去掉了setTimeout，直接在scroll事件触发时执行判断，避免状态延迟
• 简化逻辑：只通过添加/移除mystyle类控制背景切换，无需额外的透明类
• 新增width:100%是为了保证fixed定位的header铺满屏幕，可根据页面布局调整

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