Bootstrap Nav-link随页面滚动切换字体颜色的实现问题

安全阿岳

2026-10-14

问题修复方案

存在的核心问题

JS类操作逻辑错误：仅执行了类添加操作，未移除对立状态的类，导致两个颜色类同时挂载在元素上，样式覆盖逻辑混乱
拼写错误：else分支中添加的nav-tranparent拼写错误，缺少字母s，正确写法为nav-transparent
CSS优先级不足：Bootstrap内置的.nav-link选择器优先级高于你自定义的单类选择器，导致自定义颜色规则不生效
配色逻辑冲突：滚动后导航栏背景色为#FF7F2F，你同步设置文字颜色也为#FF7F2F，会导致文字和背景融为一体无法识别

修正后的代码

JS代码

var navBar = document.getElementById('navbar')
var textNavBars = document.querySelectorAll('a.nav-link');

window.onscroll = function () {
    if (document.body.scrollTop >= 200 || document.documentElement.scrollTop >= 200) {
        navBar.classList.add('nav-colored');
        navBar.classList.remove('nav-transparent');
        for (const textNavBar of textNavBars) {
            textNavBar.classList.remove('text-transparent')
            textNavBar.classList.add('text-colored')
        }
    } else {
        navBar.classList.add('nav-transparent');
        navBar.classList.remove('nav-colored');
        for (const textNavBar of textNavBars) {
            textNavBar.classList.remove('text-colored')
            textNavBar.classList.add('text-transparent')
        }
    }
}

CSS代码

.navbar{
    text-transform: uppercase;
}

.nav-colored { 
    background-color:#FF7F2F; 
    transition: background-color 3s
}
.nav-transparent{ 
    background-color:transparent;
    transition: background-color 3s;
}
/* 增加选择器权重覆盖Bootstrap默认样式 */
.nav-link.text-transparent{
    color: black;
    transition: color 3s;
}
/* 滚动后文字改为白色避免和橙色背景撞色，可按需调整色值 */
.nav-link.text-colored{
    color: #fff;
    transition: color 3s;
}