jquery - 我需要帮助完成滚动条上的垂直点导航吗？

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');