Move element on page based on scroll

I have 3 blocks on the page.

On the second block, I have 3 cases (maybe more), there is also a background line, and there is a circle in the middle of the case on this line

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.block1 {
height: 200px;
background-color: gray;
}
.block2 {
height: 100%;
background: linear-gradient(214deg, rgba(79, 142, 255, 0.00) 0%, #4F8EFF 10%, #F5E550 90%, rgba(79, 142, 255, 0.00) 100%) center / 3px calc(100% - 100px) no-repeat;
.circle {
position: relative;
width: 15px;
height: 15px;
background-color: white;
border: solid 3px #4F8EFF;
border-radius: 50%;
top: 50%;
left: calc(50% - 8px);
}
}
.text {
text-align: center;
padding: 200px 50px;
}
.block3 {
height: 200px;
background-color: gray;
}

<!-- language: lang-html -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" integrity="sha512-t4GWSVZO1eC8BM339Xd7Uphw5s17a86tIZIj8qRxhnKub6WoyhnrxeCIMeAqBPgdZGlCcG2PrZjMc+Wr78+5Xg==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="block1"></div>
<div class="block2">
<div class="case">
<div class="row">
<div class="col-5 text">Text 1</div>
<div class="col-2">
<div class="circle"></div>
</div>
<div class="col-5 text">Text 1</div>
</div>
</div>
<div class="case">
<div class="row">
<div class="col-5 text">Text 2</div>
<div class="col-2"></div>
<div class="col-5 text">Text 2</div>
</div>
</div>
<div class="case">
<div class="row">
<div class="col-5 text">Text 3</div>
<div class="col-2"></div>
<div class="col-5 text">Text 3</div>
</div>
</div>
</div>
<div class="block3"></div>

<!-- end snippet -->

Right now this circle is only for the first case, inside <div class="col-2">

Is it possible to make it so that, depending on the page scroll, this circle moves through all cases, and becomes empty <div class="col-2">, just like I drew. And it is important that the color of this circle is the same as the color of the line

That is, if we are in the middle of the page of the first case, then the circle should be on it, if we moved lower to the second case, then the circle should accordingly move to the second case, while I would like the circle itself to slide along with the scroll, and when scroll stop moved to the nearest case

I moved .circle out of .case so we only need to change its top.

detectCase() will find out which .case is closest to .circle

handleScroll() will change .circle's top & backgroundPosition so its position and color will change while scroll.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

class ScrollCircle {
constructor(container) {
this.container = container;
this.cases = this.container.querySelectorAll(".case");
this.circle = this.container.querySelector(".circle");
this.timer = null;
this.lastScrollPosition = window.scrollY;
this.lastCircleTop = null;
this.handleScroll();
this.handleWindowSize();
window.addEventListener("resize", this.handleWindowSize);
}
detectCase = () => {
const circleCenter = this.circle.offsetTop + this.circle.offsetHeight / 2;
let activeCase = null,
minDist = Infinity;
this.cases.forEach((elem) => {
const caseTop = elem.offsetTop + elem.offsetHeight / 3;
const dist = Math.abs(caseTop - circleCenter);
if (dist < minDist) {
minDist = dist;
activeCase = elem;
}
});
return activeCase;
};
scrollDown = () => {
let down = window.scrollY > this.lastScrollPosition ? true : false;
this.lastScrollPosition = window.scrollY;
return down;
};
handleScroll = () => {
const maxTop = this.cases[this.cases.length - 1].offsetTop + this.cases[this.cases.length - 1].offsetHeight / 2;
const minTop = this.cases[0].offsetHeight / 2;
let {
height: startTop
} = this.cases[0].getBoundingClientRect();
let circleTop = startTop / 2 + window.scrollY - this.container.offsetTop;
circleTop = circleTop > maxTop ? maxTop : circleTop < minTop ? minTop : circleTop;
let down = this.scrollDown();
if ((circleTop < this.lastCircleTop && down) | (circleTop > this.lastCircleTop && !down)) {
this.circle.style.top = `${this.lastCircleTop}px`;
this.circle.style.backgroundPosition = `0 ${-this.lastCircleTop}px`;
} else {
this.circle.style.top = `${circleTop}px`;
this.circle.style.backgroundPosition = `0 ${-circleTop}px`;
}
this.circle.style.backgroundSize = `15px ${this.container.offsetHeight}px`;
if (this.timer) return;
this.timer = setTimeout(() => {
const active = this.detectCase();
circleTop = active.offsetTop + active.offsetHeight / 2;
this.circle.style.top = `${circleTop}px`;
this.circle.style.backgroundPosition = `0 ${-circleTop}px`;
this.circle.style.transition = "0.5s";
this.lastCircleTop = circleTop;
this.timer = null;
}, 800);
this.circle.style.transition = null;
};
handleWindowSize = () => {
if (window.innerWidth >= 991) {
window.addEventListener("scroll", this.handleScroll);
window.addEventListener("resize", this.handleScroll);
} else {
window.removeEventListener("scroll", this.handleScroll);
window.removeEventListener("resize", this.handleScroll);
}
};
}
new ScrollCircle(document.querySelector(".block2"));

<!-- language: lang-css -->

.block1,
.block3 {
height: 1000px;
background-color: gray;
}
.block2 {
height: 100%;
position: relative;
}
.block2,
.block2 .circle {
background: linear-gradient(214deg, rgba(79, 142, 255, 0) 0%, #4f8eff 10%, #f5e550 90%, rgba(79, 142, 255, 0) 100%) center/3px calc(100% - 100px) no-repeat;
}
.block2 .circle {
width: 15px;
height: 15px;
left: calc(50% - 8px);
}
.block2 .circle,
.block2 .circle::before {
position: absolute;
border-radius: 50%;
}
.block2 .circle::before {
content: "";
inset: 3px;
background-color: white;
}
.text {
text-align: center;
padding: 200px 50px;
}
/*# sourceMappingURL=so.css.map */

<!-- language: lang-html -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" integrity="sha512-t4GWSVZO1eC8BM339Xd7Uphw5s17a86tIZIj8qRxhnKub6WoyhnrxeCIMeAqBPgdZGlCcG2PrZjMc+Wr78+5Xg==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="block1"></div>
<div class="block2">
<div class="circle"></div>
<div class="case">
<div class="row">
<div class="col-5 text">Text 1</div>
<div class="col-2"></div>
<div class="col-5 text">Text 1</div>
</div>
</div>
<div class="case">
<div class="row">
<div class="col-5 text">Text 2</div>
<div class="col-2"></div>
<div class="col-5 text">Text 2</div>
</div>
</div>
<div class="case">
<div class="row">
<div class="col-5 text">Text 3</div>
<div class="col-2"></div>
<div class="col-5 text">Text 3</div>
</div>
</div>
</div>
<div class="block3"></div>

<!-- end snippet -->

This should be more a comment then an answer... Here is how I would play with scroll, but color change is missing.

Oh! And you should give to .col-2 some sort of ID to improve filtering on circle movement!

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(document).on('scroll', function() {
const offset = 0;
let $circle = $('.circle');
$('.case').each(function() {
if(window.scrollY > ($(this).offset().top - offset)) {
$(this).find('.col-2').append($circle);
}
});
});

<!-- language: lang-css -->

.block1 {
height: 200px;
background-color: gray;
}
.block2 {
height: 100%;
background: linear-gradient(214deg, rgba(79, 142, 255, 0.00) 0%, #4F8EFF 10%, #F5E550 90%, rgba(79, 142, 255, 0.00) 100%) center / 3px calc(100% - 100px) no-repeat;
.circle {
position: relative;
width: 15px;
height: 15px;
background-color: white;
border: solid 3px #4F8EFF;
border-radius: 50%;
top: 50%;
left: calc(50% - 8px);
}
}
.text {
text-align: center;
padding: 200px 50px;
}
.block3 {
height: 200px;
background-color: gray;
}

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" integrity="sha512-t4GWSVZO1eC8BM339Xd7Uphw5s17a86tIZIj8qRxhnKub6WoyhnrxeCIMeAqBPgdZGlCcG2PrZjMc+Wr78+5Xg==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="block1"></div>
<div class="block2">
<div class="case">
<div class="row">
<div class="col-5 text">Text 1</div>
<div class="col-2">
<div class="circle"></div>
</div>
<div class="col-5 text">Text 1</div>
</div>
</div>
<div class="case">
<div class="row">
<div class="col-5 text">Text 2</div>
<div class="col-2"></div>
<div class="col-5 text">Text 2</div>
</div>
</div>
<div class="case">
<div class="row">
<div class="col-5 text">Text 3</div>
<div class="col-2"></div>
<div class="col-5 text">Text 3</div>
</div>
</div>
</div>
<div class="block3"></div>

<!-- end snippet -->