Header scroll by HAP v4 (final)

by Petr Haluza

HTML

<header><div class="ahoj">
Já jsem header
</div></header>
<div class="content" id="contentdiv">
<h1>Skroll test pro header v3</h1>
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
</div>

<footer>footer</footer>

<div id="headerClone"></div>

CSS

header {
    background-color: yellow;
    position: fixed;
    height:100px;
    top: 0;
    bottom: unset;
    left: 0;
    right: 0;
    transition: top .2s ease-in-out ;
    z-index: 100;
}
header.outOfScreen { top: -99px}
.content { 
    margin-top:100px; /* add space for fixed header */
}




footer {height:100px; background-color: gray; transition: background-color 0.2s ease-in-out;  }


#headerClone {position:fixed; height:100px; background: orange; bottom:-99px; transition: bottom .2s ease-in-out; }
#headerClone.inScreen { bottom:0}

JavaScript

/* vytvoříme klon headeru*/
window.onload = function() {
$(".ahoj").clone().appendTo("#headerClone");
}

/* HAP - ovládání skrývání a odkrývání headeru a jeho spodního klonu v závislosti na stavu skrolu a pozici v okně */
var scrollableHeight = document.documentElement.scrollHeight - window.innerHeight;
var footerOffset = scrollableHeight - 100;
var prevScrollpos = window.pageYOffset;
var headerElement = document.querySelector("header");
var headerCloneElement = document.querySelector("#headerClone");
var headerOffset = headerElement.offsetTop + headerElement.offsetHeight;
var showBottomHeaderOffset = headerOffset * 3;

window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
	console.log("curPos:" + currentScrollPos + "  prevPos:" + prevScrollpos + "  foo:" + footerOffset + "  docHeight:" + scrollableHeight)

  switch (true) {
    case ( (prevScrollpos < currentScrollPos) && (currentScrollPos > headerOffset) && (currentScrollPos < showBottomHeaderOffset) && (currentScrollPos < footerOffset) ): 
      $(headerElement).addClass('outOfScreen');
    break;/* sjedeme dolů o headerOffset ale ne víc jak showBottomHeaderOffset - skryjeme header*/

    case ( (prevScrollpos < currentScrollPos) && (currentScrollPos > showBottomHeaderOffset) && (currentScrollPos < footerOffset) ):
      $(headerElement).addClass('outOfScreen');
      $(headerCloneElement).addClass('inScreen');
    break;/* sjedeme dolů o víc jak showBottomHeaderOffset - zobrazíme header dole*/

    case ( (prevScrollpos < currentScrollPos) && (currentScrollPos > footerOffset) ):
      $(headerCloneElement).removeClass('inScreen');
      $(headerElement).addClass('outOfScreen');
    break;/* sjelijsme k footeru - skyjeme header */

    case (prevScrollpos > currentScrollPos):
      $(headerCloneElement).removeClass('inScreen');
      $(headerElement).removeClass('outOfScreen');
      /* jedeme nahoru*/
    break;
  }
  prevScrollpos = currentScrollPos;
}
/* /end HAP */