Timeline effect CSS only

Question

Here is a demo with the result I want to acheve:

https://ultimateelementor.com/widgets/timeline/#content_timeline

There is centered gray (inactive) line, which goes purple (active) when scrolling. Can someone give ideas how this can be made with CSS only.

I have tried some background-attachment: fixed tricks, but with no result at all.

PS: I need only line-coloring effect and not icons one.

*If there is no way to be done with CSS-only, I am accepting and solutions with minimum js/jquery.

Answer 1

I thought about using position sticky.
Notes:

• Browser Support is not perfect: https://caniuse.com/css-sticky
• The body must go on after the area, so you can scroll on to fill the timeline.

body {
  height: 200vh;
}

.area {
  height: 120vh;
  background: #f6f8ff;
}

.timeline-box {
  height: 120vh;
  position: relative;
  overflow-y: clip;
  padding-left: 256px;
}

.baseline {
  width: 32px;
  /*Line Width*/
  height: 120vh;
  position: absolute;
  top: 0;
  background: #d9d9e8;
  /* Baseline Color*/
}

.timeline {
  width: 32px;
  /*line width*/
  position: sticky;
  top: 0;
}

.timeline>div {
  position: absolute;
  width: 100%;
  height: 120vh;
  background: #5c53f3;
  /*Color of the filled timeline*/
  top: -100vh;
  /*Starting point*/
}

<div class="area">
  <!--General Area with the Timeline-->
  <div class="timeline-box">
    <!--Box with all timeline elements. Can be moved and resized-->
    <div class="baseline"></div>
    <div class="timeline">
      <div></div>
    </div>
  </div>
</div>