Simple vanilla JS script for a throttled shy header/nav on scroll

shynav

<script>
    // sticky/shy header
    const header = document.querySelector('.js-header');
    const headerHeight = header.offsetHeight;
    const headerClass = '-hidden';
    let scrollPosition = 0;
    let timeout = false;

    window.addEventListener('scroll', function() {
      if (!timeout) {
        window.requestAnimationFrame(function() {
          const scrollTop = window.pageYOffset;
          let scrollDown = false;
      
          if (scrollTop > scrollPosition) {
            scrollDown = true;
          } else {
            scrollDown = false;
          }

          scrollPosition = window.scrollY;
          animateHeader(scrollPosition, scrollDown);
          timeout = false;
        });

        timeout = true;
      }
    });

    function animateHeader(scrollPos, scrollDownBoolean) {
      if ((scrollPos > headerHeight * 2) && scrollDownBoolean) {
        header.classList.add(headerClass);
      } else {
        header.classList.remove(headerClass);
      }
    }
  </script>