Javascript 如何在 Bootstrap 5 中更改页面滚动上的 nav ul 链接

发布于08月15日

我正在try 更改Bootstrap 5中页面滚动上的导航链接 colored颜色 .我已经创建了一个小提琴来显示问题，链接到以下位置:

https://jsfiddle.net/mfen723/8kvf0431/20/个

我正在使用以下功能在滚动后try 更改导航链接的 colored颜色 :

const navUlScroll = document.querySelector('a.nav-link');

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

当我使用dev工具判断导航链接(在滚动之后)时，我可以看到ul.navbar-nav-scroll类添加到了导航链接中，但这对 colored颜色没有影响.该类由以下css组成:

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

我已经使用！重要规则覆盖了以前的任何样式，但它仍然不起作用.在这个问题上提供任何帮助都是非常感激的.

const navUlScroll = document.querySelector('a.nav-link'); window.addEventListener('scroll', () => { if (window.scrollY >= 26) { navUlScroll.classList.add('ul.navbar-nav-scroll'); } else if (window.scrollY < 56) navUlScroll.classList.remove('ul.navbar-nav-scroll'); });

const navUlScroll = document.querySelector('ul.navbar-nav'); window.addEventListener('scroll', () => { if (window.scrollY >= 26) { navUlScroll.classList.add('navbar-nav-scroll'); } else if (window.scrollY < 56) navUlScroll.classList.remove('navbar-nav-scroll'); });

Javascript 如何在 Bootstrap 5 中更改页面滚动上的 nav ul 链接

推荐答案

Javascript相关问答推荐

使脚本兼容于其他YouTube URL格式

使用reaction创建可排序的表不起作用

我可以在useState中调用函数并使用其数据吗

TypScript：根据共享属性对项目进行分组并为其分配groupID

在JS中转换mysql UTC时间字段？

Python类实现的JavaScript吊坠是什么样子的？

Toast函数找不到其dis

如何使用JavaScript动态地将CSS应用于ToDo列表？

Flisk和JS错误：未捕获的Syntax错误：意外的令牌'<'

React Hooks中useState的同步问题

yarn安装一个本地npm包，以便本地包使用main项目的node_modules(ckeditor-duplicated-modules错误)

为什么useState触发具有相同值的呈现

如何使用JS创建一个明暗功能按钮？

钛中的onClick事件需要在两次点击之间等待几秒钟

按下单键和多值

不同表的条件API端点Reaction-redux

Reaction即使在重新呈现后也会在方法内部保留局部值

我不知道如何纠正这一点.

react 路由如何使用从加载器返回的数据

为什么NULL不能在构造函数的.Prototype中工作