24 - Sticky Nav

tags: JavaScript30

專案簡介

第二十四天要學習的目標是 JS 偵測滾動軸位置和 CSS 動畫的配合

課程影片：JS30 24
導讀影片：Alex

初始文件

Github 檔案位置：24 - Sticky Nav

網站初始的樣子

可以先玩玩 最後的成品

正式製作

今天要做的事情是在滾動軸滑到導覽列要不見的位置時，使導覽列可以固定於畫面最上方，並且彈出 Logo 和放大

JS 部分

這裡我們做 scroll 事件的監聽，並知道了 nav 的高為 469

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

function fixNav() {
  console.log(topOfNav, window.scrollY);
}

window.addEventListener('scroll', fixNav);

接下來只要在 window.scollY >= topOfNav 的時候加上動畫的 class，並在條件不成立的情況時移除動畫 class，即可完成 JS 的程式要求

備註：加上 padding 的原因是避免文字離最上方的 nav 列太近

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

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

window.addEventListener('scroll', fixNav);

到這裡就能在滾動軸滑到 nav 時幫 body 加上 fixed-nav class 了

CSS 部分

接下來要一一的設定動畫了！接下來的動畫都會以 body.fixed-nav *{ } 的方式來做撰寫，並將觸發於 Y 滾動軸位置大於 nav 時

首先先讓 nav 固定在最上方，並且加一點小陰影

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

接下來將 logo 加入 nav 中，原本 logo 的寬度為 0，因此這裡只要把他設為 500px 就會推入 nav 了

備註：能夠自動推入的原因是 nav ul 為 display:flex

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

最後再讓動畫觸發時能感受整體的畫面有不一樣的效果，就直接利用 scale 做放大特效了

body.fixed-nav .site-wrap {
  transform: scale(1);
}

最後程式碼

JavaScript

// Not a ton of code, but hard to
const nav = document.querySelector('#main');
let topOfNav = nav.offsetTop;

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

window.addEventListener('scroll', fixNav);

CSS

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

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

body.fixed-nav .site-wrap {
  transform: scale(1);
}

完成結果圖

最後的成品

結語

以上是第二十四天的製作紀錄，如有錯誤或不足的地方還請多多指教 >.<

Vanilla JavaScript Sticky Nav - #JavaScript30 24/30
[ Alex 宅幹嘛 ] ?‍? 深入淺出 Javascript30 快速導覽 | Day 24：Sticky Nav
MDN Web Docs