Question

我需要帮助才能创建垂直点导航，它需要添加＆＃34; active＆＃34;基于滚动时当前所在部分的类。

如果你在第一部分，第一个点应该是白色，其余部分是透明的，如果你在第二部分，第二个点应该是白色，第一个点应该是浅灰色，其余部分应该是透明的等等。

当该部分的背景为白色时，活动类应为蓝色。

这是我到目前为止所尝试的内容： 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');

滚动时需要帮助完成垂直点导航？

1 个答案: