JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box"></div>

CSS

.box { background: red; height: 200px; width: 100%; margin: 800px 0 800px 0; }
.green { background: green; }

JavaScript

$(document).ready(function() {
  	
    function start() {
    	alert("hello");
    }
  
    $(window).scroll(function() {
      if ( $(window).scrollTop() >= $('.box').offset().top - ($(window).height() / 2)) {
        $(".box").addClass("green");
        start();
      } else {
      	$(".box").removeClass("green");
      }
    });
  });