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 windowStart = $(window).scrollTop();
  var windowEnd = windowStart + $(window).height();
  
	$('.box').each(function() {
    var	box = $(this);
    var start = box.offset().top;
    var end = start + box.height();

    if (windowStart <= start && windowEnd >= end) {
      box.addClass('active');
    } else {
      box.removeClass('active');
    }
  });
}

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