Day24: Sticky Nav

簡介：如何使用 JavaScript 和 CSS 來實現固定導航欄效果。

作品頁面：https://iris1114.github.io/javascript30/24_Sticky-Nav/

HTML

包含一個 header 元素，用於顯示標題。
包含一個 nav 元素，內部有多個 a 連結。
包含一個 div 容器，內部有多個段落。

<!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

設定了基本的頁面樣式，包括字體、顏色和佈局。
設置了固定導航欄的樣式。

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

使用 JavaScript 來實現固定導航欄效果。

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

使用 position: sticky 來實現固定導航欄效果。
使用 window.scrollY 來獲取頁面滾動的距離。
使用 offsetTop 來獲取導航欄距離頁面頂部的距離。