スクロールダウン時のヘッダーの非表示/スクロール時の表示

Question

このスクリプトはほとんどうまく機能していますが、何らかの理由でスクロールアップしたときにヘッダーのリッパーが2秒後になります。どうして？私はそれを理解することはできません。ここで

は、元のスクリプトをここに私の例 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; 
} 

このスティックを削除