JSFiddle - React, Tailwind, and code Playground

HTML

<div class="txt"></div>
<div id="listItem" class="section rr" data-color="white"></div>
<div id="listItem2" class="section tt" data-color="black"></div>
<div id="listItem" class="section rr" data-color="white"></div>
<div id="listItem2" class="section tt" data-color="black"></div>
<div id="listItem" class="section rr" data-color="white"></div>
<div id="listItem2" class="section tt" data-color="black"></div>
<div id="listItem" class="section rr" data-color="white"></div>
<div id="listItem2" class="section tt" data-color="black"></div>

CSS

* {
  margin: 0;
  padding: 0;
}

.txt {
  position: fixed;
  top: 0;
  left: 0;
  background: white;
  height: 50px;
  width: 50px;
}

#listItem {
  height: 500px;
  background: red;
}

#listItem2 {
  height: 500px;
  background: blue;
}

JavaScript

var options = {
    root: document,
    threshold: 0
}

var callback = function(entries, observer) {
		entries.forEach(entry => {
      if(entry.isIntersecting) {
        if( entry.intersectionRect.top == 0) {
	        $('.txt').css('background', 'white');
          console.log(1);
        }
      } else {
      	if(entry.boundingClientRect.y < 0) {
          $('.txt').css('background', 'black');
          console.log(2);
        }
      }
    });
};

var callback2 = function(entries, observer) {
		entries.forEach(entry => {
      if(entry.isIntersecting) {
        if( entry.intersectionRect.top == 0) {
	        $('.txt').css('background', 'black');
          console.log(1);
        }
      } else {
      	if(entry.boundingClientRect.y < 0) {
          $('.txt').css('background', 'white');
          console.log(2);
        }
      }
    });
};

var observer = new IntersectionObserver(callback, options);
var observer2 = new IntersectionObserver(callback2, options);

$('.rr').each((i, e) => {
	observer.observe(e);
});

$('.tt').each((i, e) => {
	observer2.observe(e);
});