Javascript 通过JS添加类无法正常工作

我有下面的代码（您可以在代码笔中看到它，因为出于某种原因，

.navbar{position:fixed；}

在这里的代码段中不起作用），当您向下滚动时，一些

.nav链接

CSS属性必须更改。为了做到这一点，我添加了一个JS脚本，该脚本添加了向下滚动时向下滚动的

。

类

但是，它似乎只适用于第一个

.nav链接

。为了更清楚地显示出问题所在，我将

.nav link.中的字体颜色更改为红色

.nav link
适用于所有链接，为什么不向下滚动
.nav link.


var-navbar=document.querySelector（“.navbar”）；
var navbarlink=document.querySelector（“.nav link”）；
var navbarbrand=document.querySelector（“.navbar品牌”）；
变量IsScrolledDownClass=（“向下滚动”）；
var ScrollDownClassTreshold=50；
window.addEventListener（“滚动”，函数（）{
如果（！navbar）返回；
if（window.scrollY>=ScrollDownClassTreshold）{
navbar.classList.add（IsScrolledDownClass）；
navbarlink.classList.add（IsScrolledDownClass）；
navbarbrand.classList.add（IsScrolledDownClass）；
}
否则{
navbar.classList.remove（IsScrolledDownClass）；
navbarlink.classList.remove（IsScrolledDownClass）；
navbarbrand.classList.remove（IsScrolledDownClass）；
}
});
正文{
高度：200vh；
}
navbar先生{
背景色：#105565；
位置：固定；
宽度：100%；
}
.navbar品牌{
颜色：白色；
字体系列：“Julius Sans One”；
字体风格：普通；
字体大小：400；
字体大小：40px；
}
.navbar品牌：hover{
颜色：白色；
}
.导航栏导航{
保证金权利：4.4%；
}
.导航链路{
字体系列：“roboto”；
字体大小：14px；
字体大小：300；
颜色：白色；
文字装饰：无；
左侧填充：12px；
右侧填充：12px；
填充顶部：28px；
填充底部：29px；
}
.导航链接：悬停{
颜色：#105565；
背景：白色；
填充顶部：29px；
填充底部：29px；
}
@介质（最小宽度：1001px）{
.navbar品牌{
左侧填充：67px；
利润底部：3倍；
左缘：1.9%；
过渡：0.4s；
}
.navbar.is-scrolled-down{
填充顶部：0；
填充底部：0；
}
.navbar-brand.is-scrolled-down{
字号：28px；
填充顶部：0；
填充底部：0；
页边距底部：0；
}
.nav-link.is-scrolled-down{
颜色：红色；
填充顶部：15px；
垫底：12px；
}  
}
@介质（最大宽度：1000px）{
.navbar品牌{
高度：52px；
线高：52px；
填充顶部：0；
填充底部：0；
左缘：2.5%；
过渡：0.4s；
}
.fas{
颜色：rgba（255255,1.00）；
}
.导航链路{
边缘顶部：15px；
边缘底部：14px；
}
.navbar-brand.is-scrolled-down{
字号：28px；
垫面：0.4%；
垫底：0.3%；
高度：40px；
线高：40px；
}
.nav-link.is-scrolled-down{
填充顶部：15px；
填充底部：14px；
}
}

导航栏学习












使用
querySelector
只返回
.nav link
元素中的一个，这就是将类添加到一个元素的原因

而
querySelectorAll
返回与选择器匹配的所有元素。然后，您应该遍历生成的数组并添加或删除该类


//JavaScript文档
const navbar=document.querySelector（“.navbar”）；
const-navbarlink=[…document.queryselectoral（“.nav-link”）]；
const navbarbrand=document.querySelector（“.navbar品牌”）；
const IsScrolledDownClass=“向下滚动”；
常量ScrollDownClassTreshold=50；
addEventListener（“滚动”，_=>{
如果（！navbar）返回；
如果（scrollY>=ScrollDownClassTreshold）{
navbar.classList.add（IsScrolledDownClass）；
navbarbrand.classList.add（IsScrolledDownClass）；
forEach（link=>link.classList.add（IsScrolledDownClass））；
}否则{
navbar.classList.remove（IsScrolledDownClass）；
navbarbrand.classList.remove（IsScrolledDownClass）；
forEach（link=>link.classList.remove（IsScrolledDownClass））；
}
});
@charset“utf-8”；
/*CSS文档*/
身体{
高度：200vh；
}
navbar先生{
背景色：#105565；
位置：固定；
宽度：100%；
}
.navbar品牌{
颜色：白色；
字体系列：“Julius Sans One”；
字体风格：普通；
字体大小：400；
字体大小：40px；
}
.navbar品牌：hover{
颜色：白色；
}
.导航栏导航{
保证金权利：4.4%；
}
.导航链路{
字体系列：“roboto”；
字体大小：14px；
字体大小：300；
颜色：白色；
文字装饰：无；
左侧填充：12px；
右侧填充：12px；
填充顶部：28px；
填充底部：29px；
}
.导航链接：悬停{
颜色：#105565；
背景：白色；
填充顶部：29px；
填充底部：29px；
}
@介质（最小宽度：1001px）{
.navbar品牌{
左侧填充：67px；
利润底部：3倍；
左缘：1.9%；
过渡：0.4s；
}
.navbar.is-scrolled-down{
填充顶部：0；
填充底部：0；
}
.navbar-brand.is-scrolled-down{
字号：28px；
填充顶部：0；
填充底部：0；
页边距底部：0；
}
.nav-link.is-scrolled-down{
颜色：红色；
填充顶部：15px；
垫底：12px；
}
}
@介质（最大宽度：1000px）{
.navbar品牌{
高度：52px；
线高：52px；
填充顶部：0；
填充底部：0；
边际收益