jQuery scrollTop hide element when scrolling down

HTML

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

CSS

body {
    height: 2000px;
}
.box{
   background:red;
    padding:5px;
    margin:50px;
    width:50px;
    height:50px;
}
.box.active{
   background:green;
}

JavaScript

$(function() {
    $(".box")
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();
    		$("div").each(function(){
        	if(scroll > ($(this).offset().top + $(this).height())) {
          	$(this).addClass('active');
          }else{
          	//тут можно изменить блок обратно, если он появился
          }
        });
    });
});