Javascript 对于语句中断if语句，导航栏在滚动时更改颜色

我试图使导航栏的背景和李元素改变他们的滚动颜色

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');
    }
     }

 });

const navbar=document.querySelector（'.navigation'），
li=document.queryselectoral（'.navigation ul li a'）；
window.addEventListener（'scroll'，函数（）{
如果（window.pageYOffset>80）{
navbar.classList.add（'navigation-js'）；
对于（var i=0；i您的循环终止条件是错误的：

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

（变量i=0；i）的

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