javascript - Why do the scroll axis scroll forward and roll back produce different effects?

Question

When the scroll axis rolls along, the effect is reasonable, that is, when it reaches the specified position, the corresponding serial number changes color, but when it scrolls to the bottom, and when it scrolls further, there will be no To the top of the specified area, the corresponding color scale has changed color. From the code I provided below,
html:
<p class="submenu" id="submenu">

<p class="cirle one" scrollto="#one">1</p>
<p class="line" ></p>
<p class="cirle two" scrollto="#two">2</p>
<p class="line"></p>
<p class="cirle three" scrollto="#three">3</p>
<p class="line"></p>
<p class="cirle four" scrollto="#four">4</p>
<p class="line"></p>
<p class="cirle five" scrollto="#five">5</p>
<p class="line"></p>
<p class="cirle six" scrollto="#six">6</p>

</p>
js:
var circle=$(".cirle")
$(window).on("scroll",scroll)
function scroll(){

var scrtop=$(this).scrollTop();
   $.each(circle,function(){
  if(scrtop>=$($(this).attr("scrollto")).offset().top){
    $(this).addClass("active").siblings().removeClass("active");
  }

 })

}
It can be seen that it is because the condition if(scrtop>=$($(this).attr("scrollto")).offset().top) is met. I have two questions. The first one is: for example, when you reach the serial number 6 at the bottom, as long as the mouse scrolls a little, the serial number 5 will meet the conditions, so the top of the area corresponding to the serial number 5 will appear, and the serial number 5 will change color, which makes sense. , serial numbers 1, 2, 3, and 4 also meet the condition of if(scrtop>=$($(this).attr("scrollto")).offset().top). Why only 5 changes color, while 1, 2, 3, and 4 haven’t changed color? I really can’t figure it out, because when scrolling to 6, scroll back a short distance, the scrolltop of the page body is already larger than the $(this).attr("scrollto" of the area corresponding to the serial number 1,2,3,4,5 )).offset().top is too big. Should 1, 2, 3, 4, and 5 all change color?
Second question: When scrolling forward, the effect is completely in line with the expectations. When it reaches the top of the designated area, the corresponding color mark changes color. However, when scrolling backward, it does not work. Is there any way to solve it?

Answer 1

The first question is, just because you are so violent .siblings(), every hit from 1 to 6 will restore the others.

Second question, the color will change when it reaches the top when rolling backwards. I don’t know what you expected.