<section class="first">
  <h1>Full-Screen Section to Fixed Header</h1>
  <header class="page-header">
    <nav class="nav">
      <a href="" class="logo-wrapper uk-flex uk-flex-middle">
        <img width="178" height="38" src="https://assets.codepen.io/162656/forecastr-logo-white.svg" alt="forecastr logo">
      </a>
      <ul>
        <li>
          <a href="">Home</a>
        </li>
        <li>
          <a href="">About</a>
        </li>
        <li>
          <a href="">Contact</a>
        </li>
      </ul>
    </nav>
  </header>
</section>
<section class="second">
  <div class="container">
    <h2>About mountains</h2>
    <p>A mountain is an elevated portion of the Earth's crust, generally with steep sides that show significant exposed bedrock. Although definitions vary, a mountain may differ from a plateau in having a limited summit area, and is usually higher than a hill, typically rising at least 300 metres (980 ft) above the surrounding land. A few mountains are isolated summits, but most occur in mountain ranges.</p>
    <p>Mountains are formed through tectonic forces, erosion, or volcanism, which act on time scales of up to tens of millions of years. Once mountain building ceases, mountains are slowly leveled through the action of weathering, through slumping and other forms of mass wasting, as well as through erosion by rivers and glaciers.</p>
    <p>High elevations on mountains produce colder climates than at sea level at similar latitude. These colder climates strongly affect the ecosystems of mountains: different elevations have different plants and animals. Because of the less hospitable terrain and climate, mountains tend to be used less for agriculture and more for resource extraction, such as mining and logging, along with recreation, such as mountain climbing and skiing.</p>
    <p>The highest mountain on Earth is Mount Everest in the Himalayas of Asia, whose summit is 8,850 m (29,035 ft) above mean sea level. The highest known mountain on any planet in the Solar System is Olympus Mons on Mars at 21,171 m (69,459 ft).</p>
    <p>There are three main types of mountains: volcanic, fold, and block. All three types are formed from plate tectonics: when portions of the Earth's crust move, crumple, and dive. Compressional forces, isostatic uplift and intrusion of igneous matter forces surface rock upward, creating a landform higher than the surrounding features. The height of the feature makes it either a hill or, if higher and steeper, a mountain. Major mountains tend to occur in long linear arcs, indicating tectonic plate boundaries and activity.</p>
    <p>Image from <a href="https://unsplash.com/" target="_blank">Unsplash</a> | Info from <a href="https://en.wikipedia.org/wiki/Mountain" target="_blank">Wikipedia</a></p>
  </div>
</section>
<p class="notification">👇 Scroll Down</p>
<footer class="page-footer">
  <span>made by </span>
  <a href="https://georgemartsoukos.com/" target="_blank">
    <img width="24" height="24" src="https://assets.codepen.io/162656/george-martsoukos-small-logo.svg" alt="George Martsoukos logo">
  </a>
</footer>

/* RESET STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@import url("https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap");

:root {
  --purple: #9067c6;
  --yellow: #ffbe0b;
  --white: #fff;
  --black: #333;
  --hero-height: 100vh;
  --sticky-header-height: 90px;
}

a {
  color: inherit;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font: 25px/1.5 "Jost", sans-serif;
}

.container {
  max-width: 1000px;
  padding: 0 20px;
  margin: 0 auto;
}

.notification {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  color: var(--white);
  background: var(--black);
  z-index: 1;
  font-size: 0.75em;
}

/* MAIN STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.first {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--hero-height);
  background: url(https://assets.codepen.io/162656/mountain-full.jpg) no-repeat
    center / cover;
  background-blend-mode: multiply;
  display: grid;
  place-items: center;
  z-index: 1;
}

section,
.first > * {
  transition: all 0.6s;
}

.first > * {
  grid-area: 1/1;
  padding: 0 20px;
  width: 100%;
}

.first h1 {
  font-size: 2em;
  line-height: 1.15;
  text-align: center;
}

.first .page-header {
  opacity: 0;
  visibility: hidden;
}

.first .nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.first .nav .logo-wrapper {
  display: flex;
}

.first .nav ul {
  display: flex;
  list-style: none;
}

.first .nav ul li:not(:last-child) {
  margin-right: 30px;
}

.first .nav ul a {
  font-size: 1.2em;
  color: var(--white);
  text-decoration: none;
  transition: color 0.2s;
}

.first .nav ul a:hover {
  color: var(--yellow);
}

.second {
  padding: calc(var(--hero-height) + 10vh) 0 10vh 0;
}

.second h2 {
  font-size: 1.5em;
}

.second p {
  margin-top: 5vh;
}

.second p:last-child {
  font-size: 0.6em;
  padding-top: 20px;
  border-top: 1px solid #efefef;
}

/* JS STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.is-sticky::before {
  content: "";
  position: fixed;
  top: 65px;
  left: 0;
  width: 100%;
  height: 15px;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.7);
}

.is-sticky .first {
  height: var(--sticky-header-height);
  background-color: var(--purple);
}

.is-sticky .first h1 {
  opacity: 0;
  visibility: hidden;
}

.is-sticky .first .page-header {
  opacity: 1;
  visibility: visible;
}

.is-sticky .second {
  padding-top: calc(var(--sticky-header-height) + 10vh);
}

/* MQ STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width: 900px) {
  .first h1 {
    font-size: 1.5em;
  }
}

@media (max-width: 600px) {
  .first h1 {
    font-size: 1.2em;
  }

  .first .nav {
    flex-direction: column;
    justify-content: center;
  }

  .first .nav ul a {
    font-size: 1em;
  }
}

/* FOOTER STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-footer {
  position: fixed;
  right: 0;
  bottom: 50px;
  display: flex;
  align-items: center;
  padding: 5px;
  font-size: 0.75em;
  background: var(--white);
}

.page-footer a {
  display: flex;
  margin-left: 4px;
}

const body = document.body;
const toggleClass = "is-sticky";

window.addEventListener("scroll", () => {
  const currentScroll = window.pageYOffset;
  if (currentScroll > 0) {
    body.classList.add(toggleClass);
  } else {
    body.classList.remove(toggleClass);
  }
});