JSFiddle - React, Tailwind, and code Playground

HTML

<div>Scroll Down</div>
<h1 id="scroll-to">I am The H1</h1>
<div>After div</div>

CSS

div {
    height:800px;
    background:red;
}
h1 {
  margin:0;
  padding:30px 0;
  transition:all 1s linear
}
h1.view {
  background: #000;
  color:white;
}

JavaScript

$(window).scroll(function() {
   var hT = $('#scroll-to').offset().top,
       hH = $('#scroll-to').outerHeight(),
       wH = $(window).height(),
       wS = $(this).scrollTop();
   if (wS > (hT+hH-wH) && (hT > wS) && (wS+wH > hT+hH)){
      $('h1').addClass('view')
   } else {
      $('h1').removeClass('view')
   }
});