JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="section">
  <div id="div-first">
    THIS IS FIRST DIV
  </div>
    <div id="div-second">
    THIS IS SECOND DIV
  </div>
  <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; }
#div-first { 
  height: 1000px;
  background: #FFF
 }
#div-second { 
  height: 1000px;
  background: #A1A1A1
}
.woman-spine { 
  position: 
  absolute; 
  top: 10%; 
  left: 40%; 
  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(){
		
    //Делим отрезки по размеру div-second
    var hdot = $('#div-second').height() / (12);
    
    $( window ).scroll(function() {
      //Проверяем что внутри div-second
    	if (($(window).scrollTop() >= $('#div-second').offset().top)
      		&& ($(window).scrollTop() <= ($('#div-second').offset().top + 																					$('#div-second').height()))) {
   
          var dotCenter = Math.round(($(window).scrollTop() - $('#div-second').offset().top) / 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);
          }
      }
    });
})