スクロール効果はDOM要素の配列の最後の項目にのみ反映されます

Question

私が作成しているポートフォリオサイトでこれまで達成しようとしているのは、ユーザーのセクションに応じてアクティブなナビゲーション項目の動的なマーキングですスクロールしています。たとえば、ユーザーが「Works」セクションにいる場合、Javascriptは、「Works」セクションのIDが#worksであるため、javascriptはhrefの#worksを持つ「Works」navアイテムに.active-nav-itemクラス名を適用します。働く<section id="contact">

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

<a href="#works">ナビゲーションメニューは、彼/彼女は現在どのような部分をユーザに通知されるようなものです。 問題は次のとおりです。下にスクロールすると、連絡先である最後の項目のみが有効になります。他の3つは何も表示しません。 window.onscrolリットルあなたはそれが最後の要素のためにバインドされますので、それはのための最後の要素に過ぎなかったとして、各要素の1をバインドしようとしている唯一の関数にバインドさすることができますので、たまたま

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

onscroll機能がバインドされていました！

これはその仕組みではありません。これの逆ではなく、onscroll関数内のループを実行する必要があります！

また、コードにもう1つの問題は、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>