2
$(window).scroll(function () {

    if ($(this).scrollTop() > 0) {

        $('#header ul').animate({ width: 811, marginTop: 0 }, 200);
        $('#inicio-btn, #sobre-nos-btn, #sistemas-btn, #noticias-btn, #contato-btn, #usuario-btn').animate({ marginTop: 30 }, 200);
        $('#logo').animate({ width: 120, marginTop: 18 }, 200);

    } else {

        $('#header ul').animate({ width: 931, marginTop: 90 }, 200);
        $('#inicio-btn, #sobre-nos-btn, #sistemas-btn, #noticias-btn, #contato-btn, #usuario-btn').animate({ marginTop: 37 }, 200);
        $('#logo').animate({ width: 240, marginTop: 0 }, 200);

    }

});

Quando a condição é falsa, ou seja, quando voltar ao topo da página, o código demora um tempo para rodar. É como se o JQ ficasse ali pensando no que fazer... Já tentei milhares de coisas e nada resolve esse problema.

4
  • Já tentou colocar .stop() antes dos .animate()?
    – Lucas
    Commented 5/02/2015 às 18:05
  • 1
    Referenciar os seletores talvez também seja uma boa prática para evitar que o jQuery a todo momento pesquise o elemento no DOM Commented 5/02/2015 às 18:06
  • Consegues reproduzir esse comportamento estranho num jsFiddle?
    – Sergio
    Commented 5/02/2015 às 19:01
  • @WallaceMaxters o próprio jquery tem cache interno, referenciar pode ajudar a melhorar alguns milesegundos, mas nada perceptível ao uso :) jquery é meio bugado mas é bem útil
    – Syzoth
    Commented 6/02/2015 às 4:59

1 Resposta 1

3

O problema pode ser ocasionado pela falta da chamada de stop antes da animações.

Tente colocar seu código dessa forma:

$(window).scroll(function () {

    if ($(this).scrollTop() > 0) {

        $('#header ul').stop().animate({ width: 811, marginTop: 0 }, 200);
        $('#inicio-btn, #sobre-nos-btn, #sistemas-btn, #noticias-btn, #contato-btn, #usuario-btn').stop().animate({ marginTop: 30 }, 200);
        $('#logo').stop().animate({ width: 120, marginTop: 18 }, 200);

    } else {

        $('#header ul').stop().animate({ width: 931, marginTop: 90 }, 200);
        $('#inicio-btn, #sobre-nos-btn, #sistemas-btn, #noticias-btn, #contato-btn, #usuario-btn').stop().animate({ marginTop: 37 }, 200);
        $('#logo').stop().animate({ width: 240, marginTop: 0 }, 200);

    }

});

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .