jQuery scrollTop hide element when scrolling down

HTML

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

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

CSS

body {
    height: 2000px;
}
.box{
   background:red;
    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() {
    $(".box")
    $(window).scroll(function() {    
        var scroll = $(window).scrollTop();
    
        if($(this).scrollTop() > 50) {
            $(".box").removeClass('box').removeAttr('style').addClass("box3");
        }
    });
});