detect part of page

HTML

<div id="viewportMask"></div>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

CSS

ul {
    margin: auto;
}
ul li {
    width: 300px;
    height: 100px;
    background: silver;
    /*float: left;*/
    margin: 10px;
    list-style:none;
    
    -ms-transform: scale(0.5);
    -webkit-transform: scale(0.5);
    transform: scale(0.5); 
    
	  -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
ul li.middleviewport {
    background:blue;
}
#viewportMask {
    position: fixed;
    top: 30%;
    bottom: 40%;
    left: 0;
    right: 0;
    background: green;
    opacity: 0.2;
}


.in_zone{
    background: red;
    -ms-transform: scale(1.0);
    -webkit-transform: scale(1.0);
    transform: scale(1.0); 

}

JavaScript

$(document).ready(function () {
  var boundingBox = {};
  var $lis = $('ul li');
  var $window = $(window);

  $lis.each(function() {
    boundingBox[this] = this.getBoundingClientRect();
  });

  $window.on('scroll', function () {
    var windowHeight = $(window).height(),
        gridTop = windowHeight * .3,
        gridBottom = windowHeight * .6;

    $lis.each(function() {
      var thisTop = boundingBox[this].top - $window.scrollTop();

			console.log(thisTop - gridTop, (thisTop + boundingBox[this].height) < gridBottom);

      $(this).toggleClass('in_zone', thisTop > gridTop && (thisTop + boundingBox[this].height) < gridBottom);
    });
  });
  
  $(window).trigger('scroll');
});