JSFiddle - React, Tailwind, and code Playground

HTML

<header><div>menu1</div><div>menu2</div></header>

<section class="Gray">
  <div>contentsGray</div>
</section>

<section class="Red">
  <div>contentsRed</div>
</section>

<section class="Blue">
  <div>contentsBlue</div>
</section>

CSS

body {
    background: #fff;
    padding: 0;
    margin: 0;
}
section {
    height: calc(100vh - 50px);
    padding: 50px 0 0 0;
    background: gray;
}
section.Red.is_view{
    background: red;
}
section.Blue.is_view{
    background: blue;
}
header {
    display: flex;
    align-items: center;
    justify-content: space-evenly;    
    position: fixed;
    top: 0; right: 0; left: 0;
    height: 50px;
    background: black;
    color: white;
}

JavaScript

// .Redが見えたらクラス付与
const optionsRed = {
	// オプション指定なし
};
const observerRed = new IntersectionObserver((entries) => {
	entries.forEach(entry => {
		if( entry.isIntersecting ){
    	console.log('.Redが表示されました');
			$('.Red').addClass('is_view');
		}
	});
}, optionsRed);
observerRed.observe( $(".Red")[0] );

// .BLueが見えたらクラス付与
const observerBlue = new IntersectionObserver((entries) => {
	entries.forEach(entry => {
		if( entry.isIntersecting ){
			console.log('.Blueが表示されました');
      $('.Blue').addClass('is_view');
		}
	});
});
observerBlue.observe( $(".Blue")[0] );