scroll an element on the page along with a normal scroll

July 1, 2023

I have 3 blocks on the page, on the middle block there is a vertical line and on this line there is an element with class circle

The question is, is it possible to make this circle scroll across the page along with the usual scroll?

That is, the circle itself should not be a scroll, it should just move up and down the page, along with the standard scroll

And also the line on which this circle has a gradient, and also it is necessary that the color of the circle changes along the gradient line

I tried somehow to bind this element to the scroll through javascript, but nothing sensible came out

.block1 {
  height: 200px;
  background-color: gray;
}

.block2 {
  height: 600px;
  background: linear-gradient(45deg, red, orange) center/2px 80% no-repeat;
  
  .circle {
    width: 15px;
    height: 15px;
    background-color: white;
    border: solid 2px orange;
    border-radius: 50%;
    position: absolute;
    top: 330px;
    left: calc(50% - 8px);
  }
}

.text {
  text-align: center;
  padding-top: 30px;
}

.block3 {
  height: 200px;
  background-color: gray;
}

<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="row">
    <div class="col-6 text">Text</div>
    <div class="col-6 text">Text</div>
  </div>
  <div class="circle"></div>
</div>

<div class="block3"></div>

>Solution :

Regarding the moving, you can simply use CSS position: sticky with top: 50%;

* {margin: 0; box-sizing: border-box;}

.block1 {
  height: 50vh;
  background-color: gray;
}

.block2 {
  height: 600px;
  background: linear-gradient(45deg, red, orange) center bottom / 2px calc(100% - 60px) no-repeat;
}

.circle {
  width: 15px;
  height: 15px;
  background-color: white;
  border: solid 2px orange;
  border-radius: 50%;
  position: absolute;
  left: calc(50% - 8px);
  position: sticky;
  top: 50%;
}

.text {
  text-align: center;
  padding-top: 30px;
}

.block3 {
  height: 100vh;
  background-color: gray;
}

<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="row">
    <div class="col-6 text">Text</div>
    <div class="col-6 text">Text</div>
  </div>
  <div class="circle"></div>
</div>

<div class="block3"></div>

For changing the color of the circle some JS would be needed in order to determine the circle boundingClientRect within the viewport or its parent – and apply that delta * hueRange to the the HSL (Hue) degrees you want to cover