fixedheader.js

const
    header = document.querySelector('.header');
  let lastScrollTop = 0;
  
  window.addEventListener('scroll', () => {
    let scrollDistance = window.scrollY;
    
    if (scrollDistance > lastScrollTop) {
      header.classList.remove('scrollable');
      header.style.opacity = "";
      header.style.transform = 'translateY(-10px)';
    } else {
      // header.style.opacity = 1;
      header.style.transform = 'translateY(0)';
      header.classList.add('scrollable');
    }

    lastScrollTop = scrollDistance;

    if (lastScrollTop === 0) {
      header.classList.remove('scrollable');
       header.style.opacity = "";
       header.style.transform = 'translateY(0)';
    }
  })