아래로 스크롤 할 때 헤더 숨기기/위로 스크롤 할 때 표시

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; 
} 

이 스글 리글을 제거하십시오.