Disparar Animação CSS com Scroll

Disparar Animação CSS com Scroll

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css">
<div id="container">    
    <div class="div">
        UM
    </div>
     
    <div class="div div2">
        DOIS
    </div>

    <div class="div">
        TRÊS
    </div>
</div>

CSS

#container {
    height: 2000px;
}
.div {
   padding:10px;
    height: 300px;
    margin-bottom: 10px;
}

JavaScript

$('.div').hide();
// console.log(positionDiv2);
$(window).scroll(function(){
    // console.log($(this).scrollTop());
    if($(this).scrollTop() >= $('.div2'))){
        $('.div').each(function(){
            $(this).fadeIn(2500).css('background-color','salmon');
        });
    }
});