JSFiddle - React, Tailwind, and code Playground

HTML

<a>fixed text</a>

<div class="box red" data-text-color="white">

</div>
<div class="box blue" data-text-color="white">

</div>
<div class="box yellow" data-text-color="red">

</div>
<div class="box red" data-text-color="white">

</div>
<div class="box blue" data-text-color="white">

</div>
<div class="box yellow" data-text-color="red">

</div>
<div class="box red" data-text-color="white">

</div>
<div class="box blue" data-text-color="white">

</div>
<div class="box yellow" data-text-color="red">

</div>
<div class="box red" data-text-color="white">

</div>
<div class="box blue" data-text-color="white">

</div>
<div class="box yellow" data-text-color="red">

</div>
<div class="box red" data-text-color="white">

</div>
<div class="box blue" data-text-color="white">

</div>
<div class="box yellow" data-text-color="red">

</div>

CSS

body {
  margin: 0;
}

.box {
  height: 100px;
}

.red {
  background: red;
}

.yellow {
  background: yellow;
}

.blue {
  background: blue;
}

a {
  position: fixed;
  right: 10px;
}

JavaScript

$(function() {
  var $fixedElement = $('a');
  console.log($(".blue").get(0).getBoundingClientRect());
  $(window).scroll(function(e) {
    var pos = $fixedElement.position();
    console.log(pos.top, pos.left);
    var currentContainer = document.elementFromPoint(pos.left, pos.top + 5);
    if (currentContainer != null) {
      console.log(currentContainer);
      $fixedElement
        .text(currentContainer.getAttribute('class'))
        .css('color', currentContainer.getAttribute('data-text-color'));
      console.log('eleman var');
    } else {
      console.log('eleman yok');
    }
  });
});