JSFiddle - React, Tailwind, and code Playground

HTML

<section class="satu">
  
</section>

<section class="dua">
  
</section>

<section class="tiga">
  <div id="dedi">haloo</div>
</section>

CSS

section {height:400px;}
#dedi{color:white;display:none}
.satu{background:red}
.dua{background:blue}
.tiga{background:green}

Babel + JSX

$(document).ready(() => {
  const ijo = $('.tiga');
  const dedi = $('#dedi');
  
  $(document).scroll(e => {
  	const jarakIjoKeWindowTop = ijo[0].getBoundingClientRect().top;
    const tinggiLayar = $(window).height();

    if (jarakIjoKeWindowTop <= tinggiLayar) {
    	dedi.fadeIn('slow')
    } else {
    	dedi.fadeOut('slow')
    }
  })
})