<nav>
  <div class="logo">
    Logo
  </div>
  <div class="links">
    <a href="">Link 1</a>
    <a href="">Link 2</a>
    <a href="">Link 3</a>
    <a href="">Link 4</a>
  </div>
</nav>
<main>
</main>
<section>
  <h1>Header</h1>
  <p><b>Start scrolling the page to see the menu disappear, then scroll back up to make it appear.</b></p>
  <p>
    According to all known laws
    of aviation,
    there is no way a bee
    should be able to fly.
    Its wings are too small to get
    its fat little body off the ground.
    The bee, of course, flies anyway
    because bees don't care
    what humans think is impossible.
  </p>
  <p>
    Ullam animi officia enim iste ex! Sed sequi beatae libero voluptas ipsa magnam, quod, deserunt id voluptatem accusamus voluptatum architecto aspernatur molestias error, corporis quo perspiciatis sapiente ipsam aut voluptates?
  </p>
  <p>
    Nam quod fugit dignissimos porro, tempora omnis reprehenderit quasi tempore ex dolorum cupiditate neque sequi aperiam fugiat, nobis odio aliquid temporibus optio totam impedit maxime, sunt quam. Explicabo, voluptas vitae. Rerum, rem eveniet id error ab atque illo illum at, nemo quisquam exercitationem ratione saepe tempore inventore eum, eaque iusto labore voluptas. </p>
  <p> Repellat quasi esse rerum explicabo ipsum, veritatis amet voluptatem. Magni non consequatur possimus porro repellendus nam vero est assumenda voluptate sed, excepturi, nulla laborum molestiae veritatis repudiandae facilis similique temporibus.
    Impedit ut deleniti eveniet nam omnis, doloremque hic assumenda! Recusandae deleniti repudiandae perferendis mollitia? Non voluptatibus repellat, error qui voluptatem iusto eos magni minima nisi, ex vero tempore tenetur quibusdam.
    Minima debitis tempore iusto nam ratione saepe illo ea ipsam labore hic quisquam, voluptate impedit suscipit quod unde inventore autem! Iste nulla facere est exercitationem quis omnis provident voluptatibus illum.
  </p>
  <p>
  Repudiandae doloremque ut dolor modi expedita quod corporis odit non praesentium? Culpa, nihil asperiores! Fuga nesciunt, iure, omnis aliquid esse quisquam doloribus saepe, perspiciatis cum rerum culpa dolorem a laudantium.
  Earum aspernatur quis delectus quibusdam recusandae? Optio incidunt, hic, ipsam quae saepe sed qui quaerat aspernatur, perferendis exercitationem mollitia molestias beatae neque animi excepturi ut repellat sequi ipsum voluptatum natus?
  Alias deserunt suscipit unde, a corporis iure. Accusantium pariatur corporis soluta reiciendis iusto modi fuga mollitia, doloremque ipsa nihil, commodi ratione inventore minus quaerat numquam sapiente quia incidunt aperiam officia?
  Perferendis cumque distinctio ipsa earum? Autem molestias temporibus laudantium itaque minus natus tempore facilis voluptate accusamus architecto. Magni vitae repellendus doloribus praesentium! Amet eos nihil ex quisquam molestias provident doloribus!</p>
  <p>
  Molestias fuga, suscipit quam ullam incidunt nihil excepturi eaque accusamus natus reiciendis officia, rem delectus optio vero harum dignissimos nisi sequi. Corporis, magni voluptatibus maxime vel voluptatum hic earum ipsa.
  Impedit corrupti officiis laudantium eaque harum quae ducimus amet architecto asperiores, modi voluptatibus dolores. Impedit ratione aperiam quia omnis aliquam quaerat sed sequi eius cupiditate in adipisci beatae, placeat cum?
  Excepturi possimus eum nesciunt delectus sint quos in repellendus optio dolorem quae tenetur distinctio voluptate temporibus, ipsa repellat molestiae vitae, saepe maxime consequatur corporis ea libero! Distinctio cumque illo ea.
  Quae quam est officiis nulla, culpa quia itaque numquam. Ad dolorum rerum, repellat nobis, voluptas dignissimos hic molestiae harum quaerat similique laudantium totam eius amet impedit, quibusdam reiciendis obcaecati in?
  Quod corporis eveniet minima velit! Blanditiis, quia fugiat ea provident explicabo quaerat inventore earum nam libero veniam sequi aspernatur quam qui neque eaque totam eos illum, voluptate vero corporis voluptates?
  Repudiandae adipisci itaque, et temporibus tempore ipsa sint nisi, consequuntur placeat modi cum dolorum voluptates aut facilis. Quia, ea nihil, excepturi impedit, fugit nemo magni nam libero delectus dolor odit.
  Unde, odio. Reiciendis obcaecati quae eius ad facilis nostrum rem? Rerum, nam. Asperiores maxime placeat, omnis optio odit repellendus iste non unde error explicabo illum quia. Hic eum saepe voluptates?</p>
</section>
<footer>
  Pen by <a href="https://www.jemimaabu.com" target="_blank" rel="noopener">Jemima Abu</a> <span class="heart">&hearts;</span>
</footer>
body {
  margin: 0;
  font-family: 'Lato', sans-serif;
}

* {
  box-sizing: border-box;
}

nav {
  position: sticky;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 1.5rem 2rem;
  background-color: #eaeaea;
  transition: top 500ms ease-in-out;
}

nav.scroll-up,
nav:focus-within {
  top: 0;
}

nav.scroll-down {
  top: -100%;
}

.links {
  display: flex;
  margin: 0 -1em;
}

.links a {
  display: inline-block;
  margin: 0 1em;
}

.logo {
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

nav a {
  color: #0f0f0f;
  text-decoration: none;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

section {
  width: 65%;
  margin: 0 auto;
}

section h1 {
  font-size: 2rem;
}

section p {
  font-size: 1.25rem;
  line-height: 140%;
}

footer {
  padding: 1em;
  text-align: center;
  background-color: #FFDFB9;
}

footer a {
  color: inherit;
  text-decoration: none;
}

footer .heart {
  color: #DC143C;
}
const nav = document.querySelector("nav");
const supportPageOffset = window.pageXOffset !== undefined;
const isCSS1Compat = (document.compatMode || "") === "CSS1Compat";

let previousScrollPosition = 0;

const isScrollingDown = () => {
  let scrolledPosition = supportPageOffset
    ? window.pageYOffset
    : isCSS1Compat
    ? document.documentElement.scrollTop
    : document.body.scrollTop;
  let isScrollDown;

  if (scrolledPosition > previousScrollPosition) {
    isScrollDown = true;
  } else {
    isScrollDown = false;
  }
  previousScrollPosition = scrolledPosition;
  return isScrollDown;
};

const handleNavScroll = () => {
  if (isScrollingDown() && !nav.contains(document.activeElement)) {
    nav.classList.add("scroll-down");
    nav.classList.remove("scroll-up");
  } else {
    nav.classList.add("scroll-up");
    nav.classList.remove("scroll-down");
  }
};

var throttleTimer;

const throttle = (callback, time) => {
  if (throttleTimer) return;

  throttleTimer = true;
  setTimeout(() => {
    callback();
    throttleTimer = false;
  }, time);
};

const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");

window.addEventListener("scroll", () => {
  if (mediaQuery && !mediaQuery.matches) {
    throttle(handleNavScroll, 250);
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.