滚动

Question

所以我把这个代码从代码笔中分出来，这个代码笔足够接近我想要实现的代码。当您从一个部分滚动到另一个部分时，可以看到https://jsfiddle.net/umarg_/1u53ccpr/，指标会更新。我必须改变什么才能使它一旦从第1部分到第2部分，只有第二个栏突出显示。实施例。

第1节 - 突出显示第一个绿色栏 滚动到第2部分 第一个绿色条不再突出显示。第二个绿色亮点 第2节 - 第二个绿色栏突出显示

我希望这是有道理的。我想远离任何图书馆。我是JavaScript新手，希望能够在vanilla js中做所有事情

 $(document).ready(function() {
  if ($('.section').length > 0) {
    $('body').append('<div class="progress-meter"></div>');

    for (var i = 0; i < $('.section').length; i++) {
      $('.progress-meter').append('<div class="indicator' + i + '"></div>');
    }

    var diff = $('.section').eq(0).offset().top;

    $(document).on('scroll', function() {
      for (var i = 0; i < $('.section').length; i++) {
        var offset = $('.section').eq(i).offset();

        if (offset) {
          var distance = offset.top - diff + 5,
            top = $(document).scrollTop(),
            windowHeight = $(window).height(),
            docHeight = $(document).height();

          if ((distance <= top) || (top + windowHeight == docHeight)) {
            $('.indicator' + i).addClass('reached');
          }
          else if ($('.indicator' + i).hasClass('reached')) {
            $('.indicator' + i).removeClass('reached');
          }
        }
      }
    });
  }
});