当一个部分出现在屏幕上时，如何将类添加到 li？

Question

当一个部分在屏幕上可见时，我必须添加活动类。我尝试了下面的代码，但它将类添加到所有 li 标记中。

下面是截图，第一个Row 1是活跃的。现在当section 2 出现在屏幕上时，Row 2 将激活

一旦达到显示所有部分，它将像这样显示。

我必须像进度条一样滑动红色。

$(window).scroll(function() {
  $('section').each(function(i) {
    var bottom_of_object = $(this).offset().top + ($(this).outerHeight() * 0.3);
    var bottom_of_window = $(window).scrollTop() + $(window).height();
    if (bottom_of_window > bottom_of_object) {
      //$(this).addClass('animated');
      $(".rightwrap li").addClass("active");

    }
  });
});

.mainWrapper {
  display: flex;
}

.leftWrap {
  width: 600px;
  margin: auto;
  border: 1px solid #222;
}

.rightwrap {
  position: fixed;
  top: 0;
  right: 50px;
}

.h-500 {
  height: 650px
}

.dashlineWrap {
  background-color: #f9f9f9;
}

.vc_row {
  height: 500px;
}

.rightwrap ul li {
  position: relative;
  list-style: none;
  padding-bottom: 15px;
}

.rightwrap ul li::before {
  content: '';
  width: 2px;
  height: 100%;
  background-color: #E5E5E5;
  display: block;
  position: absolute;
}

.rightwrap ul li.active::before {
  background-color: red;
}

.rightwrap ul li a {
  padding-left: 15px;
  display: flex;
}

<div class="mainWrapper">
  <div class="leftWrap">
    <section class="dashlineWrap" id="section1">
      <div class="vc_row" id="tableofcontent-1">
        <h4>Row 1</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo Lorem ipsum dolor sit
          amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo Lorem ipsum dolor sit amet, consectetur adipisicing
          elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
          labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
          aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
      </div>
    </section>

    <section class="dashlineWrap" id="section2">

      <div class="vc_row h-500" id="tableofcontent-2">
        <h4>Row 2</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </section>

    <section class="dashlineWrap" id="section3">

      <div class="vc_row h-500" id="tableofcontent-3">
        <h4>Row 3</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </section>

  </div>

  <div class="rightwrap">
    <ul>
      <li class="active"><a href="">Row 1</a></li>
      <li><a href="">Row 2</a></li>
      <li><a href="">Row 3</a></li>
    </ul>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Answer 1

试试这个：

let positions = [];
$('section').each(function(i, section) {
  positions.push($(section).offset().top);
});

$(window).scroll(function() {
  $(".rightwrap li").each(function(i, item) {
    item.classList.remove("active");
  });
  positions.forEach((secTop, idx) => {
    if(
      $(window).scrollTop() >= secTop && 
      ($(window).scrollTop() < positions[idx+1] || positions.length == (idx+1))
    )
      $(".rightwrap li")[idx].classList.add("active");
  });
});

.mainWrapper {
  display: flex;
}

.leftWrap {
  width: 600px;
  margin: auto;
  border: 1px solid #222;
}

.rightwrap {
  position: fixed;
  top: 0;
  right: 50px;
}

.h-500 {
  height: 650px
}

.dashlineWrap {
  background-color: #f9f9f9;
}

.vc_row {
  height: 500px;
}

.rightwrap ul li {
  position: relative;
  list-style: none;
  padding-bottom: 15px;
}

.rightwrap ul li::before {
  content: '';
  width: 2px;
  height: 100%;
  background-color: #E5E5E5;
  display: block;
  position: absolute;
}

.rightwrap ul li.active::before {
  background-color: red;
}

.rightwrap ul li a {
  padding-left: 15px;
  display: flex;
}

<div class="mainWrapper">
  <div class="leftWrap">
    <section class="dashlineWrap" id="section1">
      <div class="vc_row" id="tableofcontent-1">
        <h4>Row 1</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo Lorem ipsum dolor sit
          amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo Lorem ipsum dolor sit amet, consectetur adipisicing
          elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
          labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
          aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
      </div>
    </section>

    <section class="dashlineWrap" id="section2">

      <div class="vc_row h-500" id="tableofcontent-2">
        <h4>Row 2</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </section>

    <section class="dashlineWrap" id="section3">

      <div class="vc_row h-500" id="tableofcontent-3">
        <h4>Row 3</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </section>

  </div>

  <div class="rightwrap">
    <ul>
      <li class="active"><a href="">Row 1</a></li>
      <li><a href="">Row 2</a></li>
      <li><a href="">Row 3</a></li>
    </ul>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>