JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="section">
  <div class="woman-spine">
    <div class="dot" data-scroll="1">
      <span class="spine-dot"></span>
      <span class="spine-dot-white"></span>
    </div>
    <div class="dot" data-scroll="2">
      <span class="spine-dot"></span>
      <span class="spine-dot-white"></span>
    </div>
    <div class="dot" data-scroll="3">
      <span class="spine-dot"></span>
      <span class="spine-dot-white"></span>
    </div>
    <div class="dot" data-scroll="4">
      <span class="spine-dot"></span>
      <span class="spine-dot-white"></span>
    </div>
    <div class="dot" data-scroll="5">
      <span class="spine-dot"></span>
      <span class="spine-dot-white"></span>
    </div>
    <div class="dot" data-scroll="6">
      <span class="spine-dot"></span>
      <span class="spine-dot-white"></span>
    </div>
    <div class="dot" data-scroll="7">
      <span class="spine-dot"></span>
      <span class="spine-dot-white"></span>
    </div>
    <div class="dot" data-scroll="8">
      <span class="spine-dot"></span>
      <span class="spine-dot-white"></span>
    </div>
    <div class="dot" data-scroll="9">
      <span class="spine-dot"></span>
      <span class="spine-dot-white"></span>
    </div>
    <div class="dot" data-scroll="10">
      <span class="spine-dot"></span>
      <span class="spine-dot-white"></span>
    </div>
  </div>
</div>

CSS

body{ height: 1200px; }
.section { padding: 150px 0; }
.woman-spine { position: absolute; top: 37%; left: 24%; width: 30%; }
.dot { position: relative; float: left; margin-right: 3%; width: 15px; height: 15px; }
.spine-dot { position: fixed; width: 15px; height: 15px; border-radius: 50%; background: #00aeef; }
.spine-dot-white { position: fixed; width: 15px; height: 15px; border-radius: 50%; background: #FFF; opacity: 0; }

JavaScript

function setDotOpacity(dotNumber, opacity) {
    var dotElement = $('div[data-scroll='+dotNumber+'] .spine-dot-white');
    dotElement.css('opacity', opacity);
}

$(document).ready(function(){
    var hdot = $(document).height() / (12);

    $( window ).scroll(function() {
      
      var dotCenter = Math.round($(window).scrollTop() / hdot);
      
      for (var i = 0; i < dotCenter; i++) {
         setDotOpacity(i, 1);
      }
      
      setDotOpacity(dotCenter, 0.5);
      
      for (var i = dotCenter+1; i <= 10; i++) {
         setDotOpacity(i, 0);
      }
    });
})