Плавное уменьшение при скролле

$(window).scroll(function () { 
     var sc = $(window).scrollTop() 
    if (sc > 0) { 
        $(".box").addClass("small") 
    } else { 
        $(".box").removeClass("small") 
    } 
});

    .box { 
    height:300px; 
    width:300px; 
    background-color:red; 
    transition: all 1s; 
} 
.small { 
 
width:150px; 
height:150px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class='box'></div> 
<div style='height:800px'></div>