Scroll to hide headers

scroll_to_hide_headers.js

const throttle = (callback, limit) => {
  let timeoutHandler = null
  return () => {
    if (timeoutHandler == null) {
      timeoutHandler = setTimeout(() => {
        callback()
        timeoutHandler = null
      }, limit)
    }
  }
}
const listen = (ele, e, callback) => {
  if (document.querySelector(ele) !== null) {
    document.querySelector(ele).addEventListener(e, callback)
  }
}
let header = document.getElementById('site-header')
let lastScrollPosition = window.pageYOffset
const autoHideHeader = () => {
  let currentScrollPosition = window.pageYOffset
  if (currentScrollPosition > lastScrollPosition) {
    header.classList.remove('slideInUp')
    header.classList.add('slideOutDown')
  } else {
    header.classList.remove('slideOutDown')
    header.classList.add('slideInUp')
  }
  lastScrollPosition = currentScrollPosition
}
let mobileMenuVisible = false
const toggleMobileMenu = () => {
  let mobileMenu = document.getElementById('mobile-menu')
  if (mobileMenuVisible == false) {
    mobileMenu.style.animationName = 'bounceInRight'
    mobileMenu.style.webkitAnimationName = 'bounceInRight'
    mobileMenu.style.display = 'block'
    mobileMenuVisible = true
  } else {
    mobileMenu.style.animationName = 'bounceOutRight'
    mobileMenu.style.webkitAnimationName = 'bounceOutRight'
    mobileMenuVisible = false
  }
}
const showImg = () => {
  document.querySelector('.bg-img').classList.add('show-bg-img')
}
const hideImg = () => {
  document.querySelector('.bg-img').classList.remove('show-bg-img')
}
const toggleToc = () => {
  document.getElementById('toc').classList.toggle('show-toc')
}
if (header !== null) {
  listen('#menu-btn', 'click', toggleMobileMenu)
  listen('#toc-btn', 'click', toggleToc)
  listen('#img-btn', 'click', showImg)
  listen('.bg-img', 'click', hideImg)
  window.addEventListener(
    'scroll',
    throttle(() => {
      autoHideHeader()
      if (mobileMenuVisible == true) {
        toggleMobileMenu()
      }
    }, 250)
  )
}