我需要幫助完成滾動上的垂直點導航？

Question

爲了創建一個垂直的點導航，我需要幫助，它需要根據當前滾動的部分添加「活動」類。

如果你是第一節，第一個點應該是白色的，其餘的是透明的，如果你在第二節，第二個點應該是白色的，第一個應該是淺灰色，其餘是透明的等等。

當該部分的背景爲白色時，活動類應該是藍色的。

這裏是我試過到目前爲止： 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'); 

你正在做的錯