0

Tenho um header animado, quando "scrolo" o site ele muda algumas coisas com animate, ou seja, quando o $(this).scrollTop() > 0 (de 1 até 1 milhão, mas só quando sai da posição 0) ele anima e se volta para a posição 0 outra vez, ele anima para voltar ao layout inicial.

Ou seja, ele anima quando sai da posição 0 e anima outra vez caso volte para a posição 0 (só precisaria animar nesses dois momentos

Código:

$(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);
    }
});

A questão é, quando estou scrolando o site la embaixo, ele continua executando o animate, pois cai no if($(this).scrollTop() > 0){... e isso acaba consumindo processamento desnecessariamente, pois visualmente não influencia.

Queria que ele executasse a animação apenas quando realmente é necessário, só no momento que sair do scrollTop 0 ou quando volta pro scrollTop 0

9
  • Só quer mesmo quando o scroll for 0, ou seja, a animação só ocorrer quando o scroll toda lá em cima?
    – Miguel
    21/06/2016 às 12:09
  • Quando é 0 e quando não é. O problema é que na função que fiz, se to no scroll 100 e rolo até o scroll 200, ele fica executando o animate, mesmo sem precisar 21/06/2016 às 12:12
  • use (window).scrolltop() ou veja o exemplo developer.mozilla.org/pt-BR/docs/Web/API/Window/scroll
    – KingRider
    21/06/2016 às 12:12
  • Mas quer que anime quando o scroll for igual a quê? Desculpe não percebi
    – Miguel
    21/06/2016 às 12:13
  • A sua condição creio que poderia ser qualquer coisa como if($(window).scrollTop() < 10) em vez de if($(window).scrollTop() > 0)
    – Miguel
    21/06/2016 às 12:17

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .