Day 24: Sticky Nav

Introduction: How to implement a sticky navigation bar using JavaScript and CSS.

Project Page: https://iris1114.github.io/javascript30/24_Sticky-Nav/

HTML

Contains a header element for displaying the title.
Contains a nav element with multiple a links inside.
Contains a div container with multiple paragraphs inside.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link rel="stylesheet" href="style-FINISHED.css" />
  </head>
  <body>
    <header>
      <h1>A story about getting lost.</h1>
    </header>

    <nav id="main">
      <ul>
        <li class="logo"><a href="#">LOST.</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Images</a></li>
        <li><a href="#">Locations</a></li>
        <li><a href="#">Maps</a></li>
      </ul>
    </nav>

    <div class="site-wrap">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore
        tempora rerum, est autem cupiditate, corporis a qui libero ipsum
        delectus quidem dolor at nulla, adipisci veniam in reiciendis aut
        asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in
        aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut,
        dignissimos.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore
        tempora rerum, est autem cupiditate, corporis a qui libero ipsum
        delectus quidem dolor at nulla, adipisci veniam in reiciendis aut
        asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in
        aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut,
        dignissimos.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore
        tempora rerum, est autem cupiditate, corporis a qui libero ipsum
        delectus quidem dolor at nulla, adipisci veniam in reiciendis aut
        asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in
        aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut,
        dignissimos.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore
        tempora rerum, est autem cupiditate, corporis a qui libero ipsum
        delectus quidem dolor at nulla, adipisci veniam in reiciendis aut
        asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in
        aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut,
        dignissimos.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore
        tempora rerum, est autem cupiditate, corporis a qui libero ipsum
        delectus quidem dolor at nulla, adipisci veniam in reiciendis aut
        asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in
        aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut,
        dignissimos.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore
        tempora rerum, est autem cupiditate, corporis a qui libero ipsum
        delectus quidem dolor at nulla, adipisci veniam in reiciendis aut
        asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in
        aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut,
        dignissimos.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore
        tempora rerum, est autem cupiditate, corporis a qui libero ipsum
        delectus quidem dolor at nulla, adipisci veniam in reiciendis aut
        asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in
        aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut,
        dignissimos.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore
        tempora rerum, est autem cupiditate, corporis a qui libero ipsum
        delectus quidem dolor at nulla, adipisci veniam in reiciendis aut
        asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in
        aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut,
        dignissimos.
      </p>
    </div>

    <script src="scripts.js"></script>
  </body>
</html>

CSS

Sets basic page styles including fonts, colors, and layout.
Sets styles for the sticky navigation bar.

body {
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

header {
  background: #333;
  color: #fff;
  padding: 1rem;
  text-align: center;
}

nav {
  background: #f4f4f4;
  padding: 1rem;
  position: sticky;
  top: 0;
  z-index: 1000;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: space-around;
  margin: 0;
  padding: 0;
}

nav ul li {
  margin: 0;
}

nav ul li a {
  color: #333;
  text-decoration: none;
  font-size: 1.2rem;
}

.site-wrap {
  padding: 2rem;
}

JavaScript

Uses JavaScript to achieve the sticky navigation bar effect.

const nav = document.querySelector('#main')
const topOfNav = nav.offsetTop

function fixNav() {
  if (window.scrollY >= topOfNav) {
    document.body.style.paddingTop = nav.offsetHeight + 'px'
    document.body.classList.add('fixed-nav')
  } else {
    document.body.style.paddingTop = 0
    document.body.classList.remove('fixed-nav')
  }
}

window.addEventListener('scroll', fixNav)

Note

Uses position: sticky to achieve the sticky navigation bar effect.
Uses window.scrollY to get the distance scrolled on the page.
Uses offsetTop to get the distance from the navigation bar to the top of the page.