<header id="head">
  <div class="sitetitle">
    <a href="/">{{ .Site.Title }}</a>
  </div>
</header>
<div id="headbg"></div>


<script>
  const GEORGES_POS = 0.2;
  let isHeaderMenu = false;
  let ticking = false;

  function setHeaderbar(scrollPos) {
      if(!isHeaderMenu && scrollPos > GEORGES_POS * window.innerHeight) {
          header_elt = document.getElementsByTagName('header')[0];
          header_elt.classList.add('headerbar');
          isHeaderMenu = true;
        } else if(isHeaderMenu && scrollPos < GEORGES_POS * window.innerHeight) {
            document.getElementsByTagName('header')[0].classList.remove('headerbar');
            isHeaderMenu = false;
          }
    }
  setHeaderbar(window.scrollY);

  document.addEventListener('scroll', function(e) {

      if (!ticking) {
          window.requestAnimationFrame(function() {
              setHeaderbar(window.scrollY);
              ticking = false;
            });

          ticking = true;
        }
    });
</script>