Check if element is between 30% and 60% of the viewport

Question

I am trying to change the color of

elements when they are between 30% and 60% of the viewport.

So I have this grid of elements stacking side

Answer 1

Create a div width width:100% and height:100% that represent the viewport. Inside this div you place your grid system.

Than you need to use jquery .position() jquery position

var grid = $( "griddiv's" );
var position = grid.position();
var height = $('parentdiv').height();
lower = 0.3 * height;
upper = 0.6 * height;

if(grid.top >= lower && grid.top <= upper){
  $('gridcell').css('background','red');
}

I didn't test it but I hope it works