在向上和向下滚动时，使.removeClass（）和.addClass（）平滑过渡

Question

我试图在display：none和display：block之间进行转换。具有id＃octopus-head的div应该在向下滚动时淡出，在向上滚动时返回，但是现在它只是立即弹出或弹出。

这是我正在使用的javascript：

//sticky header scripts

// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = jQuery('.scroll-height-setter').innerHeight();

jQuery(window).scroll(function(event){
    didScroll = true;
});

setInterval(function() {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}, 100);

function hasScrolled() {
    var st = jQuery(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
        jQuery('#octopus-head').removeClass('nav-down').addClass('nav-up').fadeOut(1000);
    } else {
        // Scroll Up
        if(st + jQuery(window).height() < jQuery(document).height()) {
            jQuery('#octopus-head').removeClass('nav-up').addClass('nav-down').fadeIn(1000);
        }
    }

    lastScrollTop = st;
}