Question

到目前为止，我尝试在我创建的投资组合网站中尝试实现的是根据用户滚动的部分动态标记活动的导航项。例如，如果用户在＆＃34; Works＆＃34;部分，Javascript会将.active-nav-item类名应用于＆＃34; Works＆＃34;导航项目的href为#works，因为＆＃34; Works＆＃34;部分是作品。

<a href="#works">的

<section id="works">
<a href="#design">的{{1}} <section id="design">的{{1}} <a href="#story">

的<section id="story">

就像导航菜单告诉用户他/她当前在哪个部分。问题是：当我向下滚动时，只有最后一个项目，即联系人，才会生效;其他三个没什么。

＆＃13;

<a href="#contact">

＆＃13;

<section id="contact">

＆＃13;

Answer 1

之所以发生这种情况是因为window.onscrol l只能绑定到您尝试为每个元素绑定一个函数的一个函数，因此它只被绑定到最后一个元素，因为它是onscroll函数的最后一个元素被绑定了！

这不是它的完成方式。你需要在onscroll函数内部进行循环，而不是相反！

您的代码还有一个问题是，您需要在添加到其他active之前删除a个类。

这是如何完成的：

<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>

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

1 个答案: