私はスクロールの垂直ドットのナビゲーションを終了する助けが必要ですか？

Question

縦のドットナビゲーションを作成するにはヘルプが必要です。現在スクロールしているセクションに基づいて「アクティブ」クラスを追加する必要があります。

最初のセクションにある場合、最初のドットは白く、残りの部分は透明になります。セクション2にある場合は、2番目のドットは白でなければなりません。最初のドットは薄い灰色で残りは透明です。

セクションの背景が白の場合、アクティブなクラスは青色になります。ここで

は、私がこれまで試したものです： https://jsfiddle.net/wx38rz5L/2075/

// First try to add active class based on Scroll 
    var top1 = $('#firstproject-header').offset().top; 
    var top2 = $('#firstproject-team').offset().top; 
    var top3 = $('#firstproject-about').offset().top; 
    var top4 = $('#firstproject-lorem').offset().top; 
    var top5 = $('#firstproject-contact').offset().top; 

    $(document).scroll(function() { 

      if ($(document).scrollTop() >= top1 && $(document).scrollTop() < top2) { 
      $('.scroll-fixed a:first').addClass('active'); 
      $('.scroll-fixed a:last').removeClass('active'); 
      } else if ($(document).scrollTop() >= top2 && $(document).scrollTop() < top3) { 
       $('.scroll-fixed a:first').css('background-color', '#00f'); 
       $('.scroll-fixed a').css('background-color', '#0f0'); 
      } else if ($(document).scrollTop() >= top3 && $(document).scrollTop() < top4) { 
      $('.scroll-fixed a').css('background-color', '#00f'); 
      } else if ($(document).scrollTop() >= top4 && $(document).scrollTop() < top5) { 
      $('.scroll-fixed a').css('background-color', '#222'); 
      } 
      else if ($(document).scrollTop() >= top5) { 
      $('.scroll-fixed a:last').addClass('active'); 
      $('.scroll-fixed a:first').removeClass('active'); 
      } 
    }); 

は、それが働いて滑らかなアニメーションでクリックに基づいてアクティブなクラスを追加しますが、青と白のアクティブなクラスを追加し、スクロールに関して、私はまだ助けが必要。

大歓迎です。

Answer 1

はねえ、このjsfiddleをチェックし、やるべき仕事がたくさんあったが、私はすべてが今

に固定されていると思いますが、間違ってやっていた

$('.scroll-fixed a:first').css('background-color', '#d3d3d3'); 

を使用しているときは、この

$('.scroll-fixed li:first a').css('background-color', '#d3d3d3'); 

のように使用する必要があります