<header class="element">Меню навигации</header>
/* ----------------------------------------------------------- 
=========== СТИЛИ ДЛЯ DEMO ===========
----------------------------------------------------------- */

body {
  font-family: "Oswald", sans-serif;
  background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.72) 99.99%,
      rgba(255, 255, 255, 0) 100%
    ),
    url(http://ewigkeit.ucoz.club/codepen/wrapper-codepen.jpg) no-repeat fixed
      center center / cover;
  padding: 40px;
  height: 3000px;
}

.element {
  width: 100%;
  height: 80px;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  color: white;
  text-transform: uppercase;
  color: #252525;
  font-size: 20px;
  background: #fff;
  transition: transform 200ms ease-in-out 0.3s;
}

.element__unpin {
  transform: translate3d(0, -100%, 0);
}

.element__pin {
  transform: translate3d(0, 0%, 0);
}
const scroll = function (e) {
  const element = document.querySelector(".element");
  let scrolltop = pageYOffset;

  window.addEventListener("scroll", function () {
    if (pageYOffset > scrolltop) {
      element.classList.add("element__unpin");
      element.classList.remove("element__pin");
    } else {
      element.classList.add("element__pin");
      element.classList.remove("element__unpin");
    }
    scrolltop = pageYOffset;
  });
};

scroll();
View Compiled

External CSS

  1. https://moonpresence.site/moonpresence/foundation/css/base.css

External JavaScript

This Pen doesn't use any external JavaScript resources.