[JS30] Day24: Sticky Nav

這一天的作品是要做一個頁面往下滾動時會訂在上方的導覽列

HTML

導覽列的結構如下

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

CSS

我們在往下滑動時，透過 JS 將導覽列加上.fixed-nav的 class，使得第一個元素出現(max-width: 500px)

li.logo {
  max-width: 0;
  overflow: hidden;
  background: white;
  transition: all 0.5s;
  font-weight: 600;
  font-size: 30px;
}

.fixed-nav li.logo {
  max-width: 500px;
}

為了讓導覽列固定在上方，要使用posistion: fixed

.fixed-nav nav {
  position: fixed;
  box-shadow: 0 5px rgba(0, 0, 0, 0.1);
}

JS

先選取#main的導覽列，當捲動的幅度超過nav.offsetTop時，在 body 加上.fixed-nav，同時要再加上paddingTop(nav 的 offsetHeight)，因為在 nav 變為固定位置時，下面元素會吃掉原本 nav 的高度，加上後才不會有跳動的現象發生。

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);