window.scroll не является мгновенной анимацией

Question

Я пытаюсь обнаружить, когда пользователь прокручивает страницу вниз, поэтому я могу анимировать высоту div. Когда пользователь находится в верхней части страницы, #header равен 100px, а после прокрутки он становится 50px. Вот мой код:

$(window).scroll(function() {  
    var scroll = $(window).scrollTop(); 

    if (scroll >= 10) { 
     $('#header').animate({height: "50px"}); 
    } else { 
     $('#header').animate({height: "100px"}); 
    } 
}); 

Вышеуказанные работы, но когда пользователь прокручивает назад к вершине, есть небольшая задержка перед высота анимации происходит.

Любые идеи?

Answer 1

окна OnScroll называется несколько раз, так что вы запуск анимировать несколько раз. Это приводит к одновременному запуску нескольких анимаций. Перед тем, как запустить следующий, вам нужно отменить предыдущую анимацию с помощью функции stop().

$(window).scroll(function() {  
    var scrollTop = $(this).scrollTop(); 
    var height = (scrollTop >= 10) ? "50px" : "100px"; 
    $('#header').stop().animate({height: height}); 
}); 

Теперь другая вещь, которую вы можете сделать, это отслеживать последнюю высоту и, если .is(':animated') работает, чем не беспокоить назвав его снова. Это все равно потребует .stop()

Answer 2

Я думаю, что продолжительность по умолчанию составляет 400 мс, возможно, это вызывает визуальную задержку. Вы пробовали НЕ анимацию высоты и просто установили ее вместо .css('height', '50px')?

по крайней мере, что скажет вам, если его одушевленный() вызов вызывает задержку или обработчик события window.scroll ...