对于语句分隔符 if 语句，导航栏在滚动时更改颜色

Question

我试图使导航栏的背景和li元素在滚动时改变它们的颜色

HTML 导航代码：

<nav  class="navbar navbar-default navbar-fixed-top navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="img/03.svg" style="width:200px;height:80px;position:relative;top:-20px;">
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-main">
<ul class="nav navbar-nav pull-right navigation-ul">
<li >
<a href="#login">
aa
</a>
</li>
<li class="">
<a href="#login">
bb
</a>
</li>
<li>
<a href="#features">
cc
</a>
</li>
<li>
<a href="#screens">
dd
</a>
</li>
<li>
<a href="#payment">
ee
</a>
</li>
<li>
<a href="#opinions">
ff
</a>
</li>
<li>
<a href="#tutorial">
gg
</a>
</li>
<li>
<a href="#why">
hh
</a>
</li>
<li>
<a href="#contact">
ii
</a>
</li>
</ul>
</div>
</div>
</nav>

我通过执行以下JavaScript代码来尝试此操作：

const navbar = document.querySelector('.navigation'),
li = document.querySelectorAll('.navigation-ul li a');
window.addEventListener('scroll', function (){
if (window.pageYOffset > 80){
navbar.classList.add('navigation-js');
for(var i=0; i<=li.length;i++){
li[i].classList.add('li-js')
}
}else{
navbar.classList.remove('navigation-js');
for(var i=0; i<=li.length;i++){
li[i].classList.remove('li-js');
}
}
});

下面的代码给我 "未捕获的类型错误：无法读取未定义的属性'类列表'"， 如果我使用" 李[0,1,2...].classList.add('li-js'(" 它正在工作，但为什么它不适用于 for 循环？ 我也试图使用 setAttribute 等进行循环。

编辑：Javascript代码有效，但让我未捕获的类型错误：每次滚动时都无法读取未定义的属性"类列表">

Answer 1

您的循环终止条件是错误的：

for(var i=0; i<=li.length;i++){

导致迭代次数过多。它应该是：

for(var i=0; i < li.length;i++){

如果列表有 10 个条目，则索引从 0 到 9，而不是从 0 到 10。