Hide header on scroll down, show on scroll up

by Petr Haluza

HTML

<body class=""><!-- možnosti: catalog; catalogProduct | shop; shopProduct | staticPage | Microsite -->

<div id="header" class="nav-down">
  <header id="HeaderGlobal">HAL hlavička<br />je vzsoká</header>
  <header id="HeaderCatalog">Katalog hlavička</header>
  <header id="HeaderShop">Shop hlavička</header>
</div>

<main>
    obsah
</main>

<footer id="FooterKatalog">Katalog footer.</footer>
<footer id="FooterShop">Shop footer.</footer>
<footer id="FooterGlobal">HAL footer.</footer>

</body>

CSS

body {
    /*padding-top: 150px;*/
    /*transition: padding 0.2s ease-in-out;*/
}

#header {
    background: #f5b335;
    position: fixed;
    top: 0;
    transition: top 0.15s ease-in-out;
    width: 100%;
}

#header.nav-up {
   /* top: -40px;*/
}

main {
   background:#aaa;
    height: 2000px;
}

footer { background: #ddd;}

JavaScript

// header skrýe při skrolu dolů, ukázat přiskrolu nahoru, body odsadit o výšku heaeru
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('#header').outerHeight();

// odsadit body po načtení a resize podle výšky headeru
$(window).on("resize", function () {
    $("body").css({ 'padding-top': + navbarHeight+ 'px' });
}).resize();


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


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


function hasScrolled() {
	var st = $(this).scrollTop();
  if(Math.abs(lastScrollTop - st) <= delta) // seskrolováno víc jak delta
  return;
    
    // seskrolováno, přidám class .nav-up a zajedu o výšlu elementu nahoru
    if (st > lastScrollTop && st > navbarHeight){
        // Scroll dolů
        $('#header').removeClass('nav-down').addClass('nav-up');
        $("#header").css({ 'top': '-'+ navbarHeight+ 'px' });
    } else {
        // Scroll nahoru
        if(st + $(window).height() < $(document).height()) {
            $('#header').removeClass('nav-up').addClass('nav-down');
            $("#header").css({ 'top': '0px' });
        }
    }
    lastScrollTop = st;
} // /function hasScrolled