Load elm

by Okulo

HTML

<body>
<div  class="box">
1
</div>
<div class="box">
2
</div>
<div class="box">
3
</div>
</body>

CSS

div.box{
  width: 250px;
  height: 300px;
  border: 1px solid;
  margin: 55px;
}

JavaScript

function inWindow(s){
  var scrollTop = $(window).scrollTop();
  var windowHeight = $(window).height();
  var currentEls = $(s);
  var result = [];
  currentEls.each(function(){
    var el = $(this);
    var offset = el.offset();
    if(scrollTop <= offset.top && (el.height() + offset.top) < (scrollTop + windowHeight))
      result.push(this);
  });
  return $(result);
};

  var boxesInWindow = inWindow("div");
 // сделаем фон этих элементов красным
boxesInWindow.css("background-color", "red");

var win = $(window);
	win.scroll(function() {
  var boxesInWindow = inWindow("div");
 // сделаем фон этих элементов красным
boxesInWindow.css("background-color", "red");
  });