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

Question

到目前为止，我正在创建的投资组合网站中尝试实现的是活动导航项的动态标记，具体取决于用户滚动的部分。例如，如果用户在“Works”部分，Javascript 会将 .active-nav-item 类名称应用于具有 #works 的 href 的“Works”导航项，因为“Works”部分的 id 是有效。

<a href="#works"> for <section id="works">
<a href="#design"> for <section id="design">
<a href="#story"> for <section id="story">
<a href="#contact"> for <section id="contact">

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

var query = document.querySelector.bind(document);

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

elems.forEach(function(elem) {
  window.onscroll = function() {
    var currentElem = this;
    if (currentElem.pageYOffset >= query(`#${elem}`).offsetTop) {
      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');
    }
  }
});

<section id="banner">
  <div id="wrapper">
    <header class="banner-header">
      <a href="" class="logo">MyLogo</a>
      <nav>
        <a href="#works">Works</a>
        <a href="#design">Design</a>
        <a href="#story">Story</a>
        <a href="#contact">Contact</a>
      </nav>
    </header>

    <div class="banner-body flex">
      <div class="centered">
        <h1>Hello World</h1>
        <div class="btn-group">
          <a href="" class="primary">Get Started</a>
          <a href="" class="secondary">See on GitHub</a>
        </div>
      </div>
    </div>

    <div class="banner-footer">
      <a href=""><i class="fa fa-chevron-down"></i></a>
    </div>
  </div>
</section>

<section id="works" style="width:100%; min-height:100vh">
  <h3>Works</h3>
</section>

<section id="design" style="width:100%; min-height:100vh">
  <h3>Design</h3>
</section>

<section id="story" style="width:100%; min-height:100vh">
  <h3>Story</h3>
</section>

<section id="contact" style="width:100%; min-height:100vh">
  <h3>Contact</h3>
</section>

Answer 1

发生这种情况是因为window.onscroll 只能绑定到一个您尝试为每个元素绑定一个的函数，因此它仅绑定到最后一个元素，因为它是绑定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>