Highlight Boxes on Show

HTML

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

CSS

body {
  margin: 50px;
}

.container {
  width: 300px;
  background: lightgrey;
  padding: 50px;
}

.box {
  display: block;
  width: 100%;
  height: 300px;
  background: grey;
}

.box:not(:last-of-type) {
  margin-bottom: 50px;
}
.box.active {
  background: red;
}

JavaScript

function highlightBoxes() {
	var yWindowStart = $(window).scrollTop();
  var yWindowEnd = yWindowStart + $(window).height();
  var xWindowStart = $(window).scrollLeft();
  var xWindowEnd = xWindowStart + $(window).width();
  
	$('.box').each(function() {
    var	box = $(this);
    var yStart = box.offset().top;
    var yEnd = yStart + box.height();
    var xStart = box.offset().left;
    var xEnd = xStart + box.width();

    if (
    	yWindowStart <= yStart && 
      yWindowEnd >= yEnd &&
      xWindowStart <= xStart &&
      xWindowEnd >= xEnd
    ) {
      box.addClass('active');
    } else {
      box.removeClass('active');
    }
  });
}

highlightBoxes();
$(document).scroll(highlightBoxes);
$(window).resize(highlightBoxes);