<div class="container">
  <div class="content">
    <div class="indicator"></div>
  </div>
  <div class="content">
    <div class="indicator"></div>
  </div>
  <div class="content" id="impDiv">
    <div class="indicator"></div>
  </div>
</div>
$blue: #3ea5ce;
$green: #99c712;
$red: #E53B3A;
$colors: $blue, $green, $red;

.content {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
}

$items: 3;

@while $items > 0 {
  .content:nth-child(#{$items}) {
    background-color: nth($colors, $items);
  }
  $items: $items - 1;
} 

const observer = new IntersectionObserver(callback, {
  threshold: [0, 0.25, 0.5, 0.75, 1]
});
const targets = document.querySelectorAll('.content');
Array.from(targets).forEach(target=>observer.observe(target));

function callback(entries, observer) {
  const target = entries[0]['target'];
  const intersection = entries[0]['intersectionRatio'];
  target.querySelector('.indicator').innerText = intersection;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.