JSFiddle - React, Tailwind, and code Playground

HTML

<div class="advantages-info"> 
  <div class="row"> 
    <div class="col-xl-3"> 
      <div class="advantages-aside">
        <div class="advantages-aside__line">
          <span style="height: 0%"></span>
        </div>
        <div class="advantages-aside__list">
          <a class="advantages-aside__list-item" href="#block1" data-href="block1">One</a>
          <a class="advantages-aside__list-item" href="#block2" data-href="block2">Two</a>
          <a class="advantages-aside__list-item" href="#block3" data-href="block3">Three</a>
          <a class="advantages-aside__list-item" href="#block4" data-href="block4">Four</a>
          <a class="advantages-aside__list-item" href="#block5" data-href="block5">Five</a>
        </div>
      </div>
    </div>
    <div class="col-xl-9"> 
      <div class="advantages-item" id="block1">
        One
      </div>
      <div class="advantages-item" id="block2">
        Two
      </div>
      <div class="advantages-item" id="block3">
        Three
      </div>
      <div class="advantages-item" id="block4">
        Four
      </div>
      <div class="advantages-item" id="block5">
        Five
      </div>
    </div>
  </div>
</div>

CSS

.row {
  display: flex;
  flex-wrap: wrap;
}

.col-xl-3 {
  width: 25%;
}

.col-xl-9 {
  width: 75%;
}

.advantages-info {
  margin-top: 100px;
}

.advantages-item {
  margin-bottom: 100px;
  height: 500px;
  background: gray;
}



.advantages-aside {
  display: flex;
  position: sticky;
  top: 40px;
  margin-bottom: 100px;
}

.advantages-aside__line {
  width: 2px;
  height: 260px;
  background: #828282;
  flex: 0 0 2px;
  margin-top: 12px;
  position: relative;
}

.advantages-aside__line span {
  width: 100%;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  background: #333333;
  transition: .3s;
}

.advantages-aside__list-item {
  padding-top: 20px;
  padding-bottom: 20px;
  color: #828282;
  position: relative;
  padding-left: 38px;
  display: flex;
  align-items: center;
}

.advantages-aside__list-item::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #828282;
  position: absolute;
  left: -4px;
}

.advantages-aside__list-item--active {
  color: #333333;
}

.advantages-aside__list-item--active::before {
  width: 12px;
  height: 12px;
  background: #333333;
  left: -7px;
}

.advantages-aside__list-item:first-child {
  padding-top: 0;
}

.advantages-aside__list-item:last-child {
  padding-bottom: 0;
}

JavaScript

function progressScroll() {
    window.addEventListener('scroll', function() {
        checkPosition()
    })

    function checkPosition() {
        const advantagesItems = document.querySelectorAll('.advantages-item')
        const advantagesMain = document.querySelector('.advantages-info')
        advantagesItems.forEach(item => {
            const id = item.getAttribute('id')
            const coords = item.getBoundingClientRect()

            coords.top < 100 ? document.querySelector(`[data-href="${id}"]`).classList.add('advantages-aside__list-item--active') :
                             document.querySelector(`[data-href="${id}"]`).classList.remove('advantages-aside__list-item--active')
        })

        const activeItems = document.querySelectorAll('.advantages-aside__list-item--active')
        const progressLine = document.querySelector('.advantages-aside__line span')

        
    }
    checkPosition()
}

progressScroll()