html

<div style="height:300vh;">
  <header class="sticky-header"></header>
</div>

JavaScript

let windowHeight = window.innerHeight;
let currentScrollPositionY;
let lastScrollPositionY;
let scrollDirectionY;

const stickHeader = document.querySelector(".sticky-header");
window.addEventListener("scroll", momentumScroll);

function momentumScroll() {
  currentScrollPositionY = window.pageYOffset || document.documentElement.scrollTop;
  if (currentScrollPositionY > windowHeight) {
    if (scrollDirectionY === undefined) {
      scrollDirectionY = "bottom";
    } else if (scrollDirectionY === lastScrollPositionY) {
      scrollDirectionY = scrollDirectionY;
    } else if (currentScrollPositionY > lastScrollPositionY) {
      scrollDirectionY = "bottom";
    } else if (currentScrollPositionY < lastScrollPositionY) {
      scrollDirectionY = "top";
    }

    if (scrollDirectionY === "bottom" && !stickHeader.classList.contains("is-hidden")) {
      stickHeader.classList.add("is-hidden");
    } else if (scrollDirectionY === "top" && stickHeader.classList.contains("is-hidden")) {
      stickHeader.classList.remove("is-hidden");
    }
  }
  lastScrollPositionY = window.pageYOffset || document.documentElement.scrollTop;
}

scss

.sticky-header {
  position: fixed;
  top: 0;
  left: 0;
  transform: translateY(0);
  width: 100%;
  height: 100px;
  background-color: blue;
  transition: 0.4s;
  &.is-hidden {
    transform: translateY(-100%);
    transition: 0.4s;
  }
}