for 语句中断 if 语句，导航栏在滚动时改变颜色答案

【问题标题】：for statement breaks if statement, navbar change color on scrollfor 语句中断 if 语句，导航栏在滚动时改变颜色
【发布时间】：2017-12-29 03:41:16
【问题描述】：

我试图让导航栏的背景和 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');
    }
     }

 });

下面的代码给了我 “未捕获的类型错误：无法读取未定义的属性 'classList'”，如果我使用“，情况会发生变化 li[0,1,2....].classList.add('li-js')" 它工作正常，但为什么它不适用于 for 循环？我也在尝试使用 setAttribute 等进行循环。

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

【问题讨论】：

标签： javascript twitter-bootstrap

【解决方案1】：

您的循环终止条件错误：

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

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

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

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

【讨论】：