Detect browser scrolls not always

0

I have an animated header, when "scrolo" the site it changes some things with animate, that is, when $(this).scrollTop() > 0 (from 1 to 1 million, but only when it leaves position 0) it animates and returns to position 0 again, it encourages you to go back to the initial layout.

That is, it animates when it leaves position 0 and animates again if it returns to position 0 (only need to animate in these two moments

Code:

$(document).scroll(function() {
    if($(this).scrollTop() > 0){
        $('.topo_caixa').animate({backgroundColor: '#0033ff'}, 300);
        $('.topo_caixa').animate({height: 50}, 300);
        $('.topo_logo').animate({opacity: 0}, 200);
        $('.topo_botao').animate({marginTop: 10}, 300);
        $('.topo_botao a').animate({color: '#ffffff'}, 300);
        $('.topo_botao_linha').animate({backgroundColor: '#ffffff'}, 300);
    }else{
        $('.topo_caixa').clearQueue();
        $('.topo_logo').clearQueue();
        $('.topo_botao').clearQueue();
        $('.topo_botao a').clearQueue();
        $('.topo_botao_linha').clearQueue();
        $('.topo_caixa').animate({backgroundColor: '#f2f5ff'}, 300);
        $('.topo_caixa').animate({height: 100}, 300);
        $('.topo_logo').animate({opacity: 1}, 200);
        $('.topo_botao').animate({marginTop: 33}, 300);
        $('.topo_botao a').animate({color: '#0166ff'}, 300);
        $('.topo_botao_linha').animate({backgroundColor: '#0166ff'}, 300);
    }
});

The question is, when I'm running the site below, it keeps running the animate, because it drops in if($(this).scrollTop() > 0){... and this ends consuming processing unnecessarily, because it visually does not influence.

I wanted it to perform the animation only when it's really needed, just the moment you exit scrollTop 0 or when you return to scrollTop 0     

asked by anonymous 21.06.2016 / 14:04

0 answers