「JavaScript 30」學習筆記（廿四）

「JavaScript 30」Study Notes
,

前言

本文為「JavaScript 30」教學影片的學習筆記。

目標

讓導覽列在螢幕滾動到指定位置時更改樣式（固定在螢幕頂端）。

筆記

選取導覽列元素。

1
const nav = document.querySelector('#main');

取得導覽列離螢幕頂端的距離。

1
let topOfNav = nav.offsetTop;

建立一個 fixNav() 方法，以改變導覽列樣式。

1
2
3
4
5
6
7
8
9
10
function fixNav() {
    // 判斷螢幕滾動是否大於等於導覽列離螢幕頂端的距離
    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;
    }
}

監聽整個視窗，當發生 scroll 事件時，觸發 fixNav() 方法。

1
window.addEventListener('scroll', fixNav);

修改 CSS 樣式表。

1
2
3
4
5
6
7
8
9
10
11
12
body.fixed-nav .site-wrap {
  transform: scale(1);
}

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

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