Скрытие заголовка при прокрутке вниз/показывается при прокрутке вверх

Question

У меня этот скрипт работает почти хорошо, но по какой-то причине при прокрутке заголовка снова появляется секунда. Зачем? Я не могу понять.

Вот мой пример https://jsfiddle.net/wg8zv95f/

Вот оригинальный сценарий http://jsfiddle.net/mariusc23/s6mLJ/31/

$(document).ready(function() { 

    var didScroll; 
    var lastScrollTop = 0; 
    var delta = 5; 
    var headerContainer = $('#header'); 
    var navbarHeight = headerContainer.outerHeight(); 

    $(window).scroll(function(event) { 
    didScroll = true; 
    }); 

    setInterval(function() { 
    if (didScroll) { 
     hasScrolled(); 
     didScroll = false; 
    } 
    }, 250); 


    function hasScrolled() { 
    var st = $(this).scrollTop(); 

    // Make sure they scroll more than delta 
    if (Math.abs(lastScrollTop - st) <= delta) 
     return; 

    // If they scrolled down and are past the navbar, add class .nav-up. 
    // This is necessary so you never see what is "behind" the navbar. 
    if (st > lastScrollTop && st > navbarHeight) { 
     // Scroll Down 
     headerContainer.removeClass('slideInDown').addClass('fadeOutUp'); 
    } else { 
     // Scroll Up 
     if (st + $(window).height() < $(document).height()) { 
     headerContainer.removeClass('fadeOutUp').addClass('slideInDown'); 
     } 
    } 

    lastScrollTop = st; 
    } 


}); 

CSS

header { 
    position: fixed; 
    width: 100%; 
    animation-duration: 0.8s; 
    z-index: 99999; 
} 

Answer 1

headerContainer.removeClass('slideInDown').addClass('fadeOutUp').slideUp(); 
headerContainer.removeClass('fadeOutUp').addClass('slideInDown').slideDown(); 

добавить это в вашем скрипте

.slideInDown { 
    animation-name: slideInDown; 
} 
.fadeOutUp { 
    animation-name: fadeOutUp; 
} 

удалить этот stlyle