jQuery scrollTop hide element when scrolling down

HTML

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

<div class="box1"></div>

CSS

body {
    height: 2000px;
}
.box{
   background:yellow;
    padding:5px;
    position:absolute;
    top:50px;
    width:50px;
    height:50px;
}

.box1{
   background:red;
    padding:5px;
    position:absolute;
    top:200px;
    width:50px;
    height:50px;
}

.box3{
   background:green;
    padding:5px;
    position:absolute;
    top:50px;
    width:50px;
    height:50px;
}

.box4{
   background:blue;
    padding:5px;
    position:absolute;
    top:200px;
    width:50px;
    height:50px;
}

JavaScript

$(function() {
 
    $(window).scroll(function() {    
        var top = box.offset().top;
				var bottom = box.height()+top;
				top = top - $(window).height();
				var scroll_top = $(this).scrollTop();
    
        if ((scroll_top > top) && (scroll_top < bottom)) {
            $(".box").removeClass('box').addClass("box3");
        }
    });
});