JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="tester"></div>
</div>

CSS

body, html {
    height: 100%;
}

#wrapper {
    height: 400%;
    background: none repeat scroll 0 0 #f44 ;
}

#tester {
    position: absolute;
    top: 150%;
    left: 50%;
    width: 300px;
    height: 600px;
    background: none repeat scroll 0 0 #fff;
    border: 5px solid black;
}

JavaScript

var tester = document.getElementById('tester');
var wrapper = document.getElementById('wrapper');

window.onscroll = function() {
  wrapper.style.backgroundColor = checkVisible(tester) ? '#4f4' : '#f44';
};

function checkVisible(elm) {
  var rect = elm.getBoundingClientRect();
  var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
  return !(rect.bottom < 0 || rect.top - viewHeight >= 0);
}