如何创建滚动时切换样式的工具栏？现有实现失效原因咨询

原代码的核心问题 #

1. DOM元素获取错误：你在scroll1函数里把container的innerHTML（字符串内容）赋值给了scroll变量，字符串没有classList属性，直接导致报错，根本没法添加样式类。
2. 滚动事件触发条件缺失：你给evrth元素绑定了滚动监听，但这个元素默认没有滚动条，必须给它设置固定高度和overflow: auto/scroll样式，否则不会触发滚动事件。
3. 逻辑不完善：当前代码只要滚动就加类，但这类需求通常是滚动到特定阈值才切换样式，而非一滚动就触发。

修正后的基础实现代码 #

HTML #

<div id="evrth" style="height: 100vh; overflow: auto;">
    <div id="bar">
        <div id="container">
            <div>something</div>
            <div>something</div>
            <div>something</div>
            <div>something</div>
        </div>
    </div>
    <!-- 添加足够多的内容让容器能滚动 -->
    <div style="height: 1500px;">更多滚动内容</div>
</div>

JavaScript #

const container = document.getElementById('container');
const scrollContainer = document.getElementById('evrth');

scrollContainer.onscroll = function() {
    // 设置滚动阈值，比如滚动超过50px时切换样式
    if (scrollContainer.scrollTop > 50) {
        container.classList.add("postcontainer");
    } else {
        // 滚动回顶部时恢复原样式
        container.classList.remove("postcontainer");
    }
};

配套CSS #

#container {
    /* 默认样式 */
    padding: 12px;
    background-color: #ffffff;
    transition: all 0.3s ease;
}

.postcontainer {
    /* 滚动后的样式 */
    background-color: #f8f9fa;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
}

更优实现方案：使用IntersectionObserver #

如果需求是工具栏滚动出视口时切换样式，用IntersectionObserver比监听scroll事件更高效，不会频繁触发回调：

const container = document.getElementById('container');
const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        // 元素完全离开视口时添加样式，回到视口时移除
        if (!entry.isIntersecting) {
            container.classList.add('postcontainer');
        } else {
            container.classList.remove('postcontainer');
        }
    });
}, { threshold: 1.0 }); // 元素完全在视口内时触发回调

observer.observe(container);

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