Border color change like a progress bar-CodePudding

I'm trying to add border effect that changes color partially when scrolled down. My problem is that this code changes the color of the borders completely and all of them at once. What it needs to do is, changing the color of the individual border partially while scrolling down the page. Just like a progress bar. My code is also problem i know but i'm not good at Jquery. Help me out on this please.

Thanks

jQuery(window).scroll(function() {
  var scroll = jQuery(window).scrollTop();

  if (scroll >= 40 && scroll < 80) {
    jQuery(".wpb_text_column").removeClass("green");
    jQuery(".wpb_text_column").addClass("blue");
  } else if (scroll >= 80) {
    jQuery(".wpb_text_column").removeClass("blue");
    jQuery(".wpb_text_column").addClass("green");
  } else {
    jQuery(".wpb_text_column").removeClass("blue", "green");
  }
});

.wpb_text_column {
  border-left: 5px solid #2451ae!important;
  transition: border-left-color 0.9s ease;
}

.blue {
  border-left: 5px solid blue!important;
  transition: border-left-color 0.9s ease;
}

.green {
  border-left: 5px solid green!important;
  transition: border-left-color 1s ease;
}

.wpb_text_column .wpb_wrapper {
  margin-left: 20px;
}

body {
  min-height: 800px;
  transition: background-color 0.75s ease;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div >
    <h3>Lorem ipsum dolor sit amet</h3>
    <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      At vero eos et accusam et</p>

  </div>
</div>

<div >
  <div >
    <h3>Lorem ipsum dolor sit amet</h3>
    <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      At vero eos et accusam et</p>

  </div>
</div>

<div >
  <div >
    <h3>Lorem ipsum dolor sit amet</h3>
    <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      At vero eos et accusam et</p>

  </div>
</div>

<div >
  <div >
    <h3>Lorem ipsum dolor sit amet</h3>
    <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      At vero eos et accusam et</p>

  </div>
</div>

CodePudding user response：

The problem is that you are checking the scroll length for the window and setting all of the bars based off of that, so that when the window passes 40px in scrolling all the bars change color. What you want to do is set up a for loop so that when the window scrolls, it checks each bar individually for the distance from the top.

Try this:

jQuery(window).scroll(function() {
  for (let bar of jQuery('.wpb_text_column')) {
    var scroll = jQuery(window).scrollTop() - jQuery(bar).offset().top;

    if (scroll < -40) {
      jQuery(bar).removeClass("green");
      jQuery(bar).addClass("blue");
    } else if (scroll >= -40) {
      jQuery(bar).removeClass("blue");
      jQuery(bar).addClass("green");
    } else {
      jQuery(bar).removeClass("blue", "green");
    }
  }
});