【CSS・js】ヘッダーをスクロールに合わせて表示・非表示させる（jQueryなし）

header {
    position: fixed;  
    top: 0;  
    left: 0;  
    z-index: 99;
    height: 5.5em;
    transition: transform 0.3s 0.1s;
}

/* スクロールするとヘッダーが隠れる */
header.hidden {
    transform: translateY(-5.5em);
}

const header = document.querySelector('header');
let prevY = window.scrollY; 

window.addEventListener('scroll', () => {
  const currentY = window.scrollY;
  if (currentY < prevY) { 
    header.classList.remove('hidden'); 
  } else { 
  if (currentY > 0) {
      header.classList.add('hidden'); 
    }
  }
  prevY = currentY; 
});