Bootstrap 5页面滚动时如何修改导航栏链接颜色

问题根源 #

你的代码存在三个关键错误：

• 元素选择错误：JavaScript中选中的是单个<a.nav-link>标签，但CSS规则是给带有navbar-nav-scroll类的<ul>下的所有导航链接设置样式，应该把类添加到<ul.navbar-nav>元素上，而非单个a标签。
• 类名添加错误：classList.add('ul.navbar-nav-scroll')是错误写法，classList.add()只需传入类名，不需要带选择器前缀，正确类名是navbar-nav-scroll。
• 逻辑冗余：else if (window.scrollY < 56)范围与if的>=26存在重叠，直接用else即可覆盖所有滚动位置小于26的情况。

修正后的代码 #

JavaScript

const navUl = document.querySelector('ul.navbar-nav');

window.addEventListener('scroll', () => {
    if (window.scrollY >= 26) {
        navUl.classList.add('navbar-nav-scroll');
    } else {
        navUl.classList.remove('navbar-nav-scroll');
    }
});

CSS

保持原有CSS不变即可：

ul.navbar-nav-scroll .nav-link {
  color: var(--blue-accent-light) !important;
}

生效原理 #

修正后，当页面滚动距离超过26px时，会给导航栏的<ul>元素添加navbar-nav-scroll类，此时CSS规则会匹配该ul下的所有.nav-link元素，通过!important覆盖Bootstrap的默认样式，实现滚动时链接颜色的切换。

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