<header>
  Logo
</header>
<main>
  <section><img src="https://images.unsplash.com/photo-1502691876148-a84978e59af8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80" alt='colorfull passage' /></section>
  <section><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam maximus tincidunt lorem ac condimentum. In vel dictum ex. Nulla facilisi. Etiam ipsum felis.</p></section>
  <section><img src='https://images.unsplash.com/photo-1459478309853-2c33a60058e7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80' alt='colored leafs' /></section>
  <section><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam maximus tincidunt lorem ac condimentum. In vel dictum ex. Nulla facilisi. Etiam ipsum felis.</p></section>
</main>

* {
  margin: 0;
  padding: 0;
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
}
header {
  position: absolute;
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.4);
  &.can-animate {
    transition: transform 0.3s ease, visibility 0s 0.3s linear;
  }
  &.is-fixed {
    background: rgba(255, 255, 255, 0.9);
    position: fixed;
    transform: translate3d(0, -100%, 0);
  }
  &.scroll-up {
    transform: translate3d(0, 0, 0);
  }
}
section {
  background: #efefef;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
img {
  width: 100%;
  max-height: 100%;
  object-fit: cover;
}
p {
  max-width: 40ch;
}

const header = document.querySelector("header");
let lastScroll = 0;

const throttle = (func, time = 100) => {
  let lastTime = 0;
  return () => {
    const now = new Date();
    if (now - lastTime >= time) {
      func();
      time = now;
    }
  };
};

const validateHeader = () => {
  const windowY = window.scrollY;
  const windowH = window.innerHeight;
  if (windowY > windowH) {
    // We passed the first section, set a toggable class
    header.classList.add("is-fixed");
    // Determine is we ready to animate
    if (windowY > windowH + 40) {
      header.classList.add("can-animate");
      if (windowY < lastScroll) {
        // Determine if we scrolling up
        header.classList.add("scroll-up");
      } else {
        header.classList.remove("scroll-up");
      }
    } else {
      header.classList.remove("scroll-up");
    }
  } else {
    header.classList.remove("is-fixed", "can-animate");
  }
  lastScroll = windowY;
};

window.addEventListener("scroll", throttle(validateHeader, 100));