CSS

.hidden {
  transform: translateY(-100%);
  transition: transform 0.3s ease;
  position: sticky;
  top:0;
  z-index: 1;
}

.visible {
  transform: translateY(0);
  transition: transform 0.3s ease;
  position: sticky;
  top:0;
  z-index: 1;
}

JS

let lastScrollTop = 0;
window.addEventListener("scroll", function() {
  let currentScroll = window.pageYOffset || document.documentElement.scrollTop;
  if (currentScroll > lastScrollTop && currentScroll>74) {
    // 向下滚动
    document.querySelector(".header").classList.remove("visible");
    document.querySelector(".header").classList.add("hidden");
  } else {
    // 向上滚动
    document.querySelector(".header").classList.remove("hidden");
    document.querySelector(".header").classList.add("visible");
  }
  lastScrollTop = currentScroll <= 0 ? 0 : currentScroll;
});

HTML

<html lang="en">
    <div class="header">
         something
    </div>
  <body>
         something
  </body>
</html>