滚动超过100vh时改变navbar（导航栏）颜色的实现问题排查

原有代码问题排查 #

• DOM元素获取失败：需确认你的HTML中header标签确实设置了id="header"，否则getElementById会返回null导致逻辑失效
• 滚动距离获取逻辑错误：document.body.scrollTop 仅在怪异模式下生效，标准模式下需使用 document.documentElement.scrollTop，建议做兼容处理
• 高度判断值错误：你要匹配的100vh是当前视口高度，应使用 window.innerHeight 而非 document.height（后者是非标准属性，返回的是整个文档的总高度，和你的需求不符）
• CSS优先级问题：.scrolled 类的z-index设置为1，低于header原生的1000，无意义且可能导致导航栏被其他元素遮挡，若不需要调整层级可删除该属性
• 语法小问题：else分支里多余的分号可删除，避免不必要的语法警告

修正后的代码 #

JS代码 #

const myNav = document.getElementById('header');
window.onscroll = function () { 
    "use strict";
    // 兼容不同浏览器的滚动距离获取
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    // 100vh对应窗口视口高度
    const viewportHeight = window.innerHeight;
    if (scrollTop > viewportHeight) {
        myNav.classList.add("scrolled");
    } else {
        myNav.classList.remove("scrolled");
    }
};

CSS代码 #

header {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    transition: background-color 0.2s; /* 明确指定过渡属性，避免其他属性意外动画 */
    z-index: 1000;
    display: flex;
    justify-content: center;
    background-color: transparent; /* 明确默认背景为透明，过渡效果更平滑 */
}

.scrolled {
    background-color: black;
    /* 移除多余的z-index设置，保持原有层级 */
}

额外优化建议 #

如果希望触发时机更精准（比如对应第一个区块的实际高度而非固定100vh），可以替换判断条件为第一个区块的offsetHeight值：

const firstBlock = document.querySelector('.你的第一个区块类名');
const triggerHeight = firstBlock.offsetHeight;
// 后续判断用scrollTop > triggerHeight即可

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