Javascript 滚动效果仅对DOM元素数组的最后一项生效

到目前为止，我正在创建的公文包站点中尝试实现的是根据用户滚动的部分动态标记活动导航项。例如，如果用户位于“Works”部分，Javascript将把.active nav item类名应用于href为#Works的“Works”nav item，因为“Works”部分的id为Works

你好，世界
作品
设计
故事
接触

发生这种情况是因为

window.onscrol

l只能绑定到一个函数，您试图为每个元素绑定一个函数，因此它只能绑定到最后一个元素，因为它是绑定

onscroll

函数的最后一个元素

事情不是这样的。您需要在

onscroll

函数中执行循环，而不是与此相反

代码的另一个问题是，在添加到其他类之前，需要从每个

a

类中删除

active

类

这是如何做到的：

<script>
            var query = document.querySelector.bind(document);

            var elems = ['works', 'design', 'story', 'contact'];

            window.onscroll = function() {              
                elems.forEach(function(elem) {
                    if(window.pageYOffset >= query(`#${elem}`).offsetTop) {
                        // removing active class first 
                        var li = document.querySelectorAll('.banner-header > nav > a');
                        for(var i = 0; i < li.length; i++)li[i].classList.remove('active-nav-item');

                        //now adding class to specific `a`
                        query(`.banner-header > nav > a[href='#${elem}']`).classList.add('active-nav-item');
                    } else {
                        query(`.banner-header > nav > a[href='#${elem}']`).classList.remove('active-nav-item');
                    }
                });
            };
</script>

var query=document.querySelector.bind（文档）；
var elems=['works'，'design'，'story'，'contact']；
window.onscroll=函数（）{
要素forEach（功能（要素）{
if（window.pageYOffset>=query（`${elem}`）.offsetTop）{
//先删除活动类
var li=document.querySelectorAll（'.banner header>nav>a'）；
对于（var i=0；inav>a[href='\${elem}']`）.classList.add（'active-nav-item'）；
}否则{
查询（`.banner header>nav>a[href='\${elem}']`）.classList.remove（'active-nav-item'）；
}
});
};

非常感谢，伙计：）