使元素在滚动位置上处于活动状态

Question

我设法做到的是，当前一个球到达顶部时，下一个球将成为“活动”类！

现在正在尝试的是什么，也可以使其相反地工作！当前一个球的位置变得大于顶部时，我希望下一个球变为“不活动”，并且该球再次变为“活动”。

这是html：

var activeMilestone = function() {
			var milestoneBalls = $('.dot');
			milestoneBalls[0].classList.add("active");
			window.onscroll = function() {
				milestoneBalls.each(function(i, v){
					var thisBall = $(this);
					var nextBall = milestoneBalls[i + 1];
					var prevBall = milestoneBalls[i - 1];
        			var thisPositionTop = thisBall.offset().top + ($(this).parent().height()/3);
        			var winScroll = window.scrollY;
        			if (thisPositionTop <= winScroll) {
        				nextBall.classList.add("active");
        				thisBall.addClass("inactive");
        			}   
        			if (thisPositionTop >= winScroll) {
        				//this.classList.add("inactive_ball");
        			}      	
  				});
			}
}
 $(document).ready(activeMilestone);

.wrapper {
  height: 1000px;
  background-color: wheat;
}

.container {
  height: 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.dot {
  width: 30px;
  height: 30px;
  border-radius: 20px;
   background-color: maroon;
  border: solid 4px green;
}

.active {
  border: solid 4px yellow;
  background-color: red;
  
}

.inactive {
   background-color: maroon;
  border: solid 4px green;
 
}

.text {
}

.header {
  width: 100%;
  height: 50px;
  background-color: lightblue;
}

<div class="wrapper">
  <div class="header"></div>
<div class="container">
  <div class="info_wrapper">
     <div class="text"></div>
  <div class="dot "></div>
  </div>
  <div class="info_wrapper">
     <div class="text"></div>
  <div class="dot "></div>
  </div>
  <div class="info_wrapper">
     <div class="text"></div>
  <div class="dot "></div>
  </div>
  <div class="info_wrapper">
     <div class="text"></div>
  <div class="dot"></div>
  </div>
 
</div>
 </div>