JS30-24-Sticky-Nav

發表於 | 分類於 ， | 0 comments

利用一些小技巧，處理navbar的動畫效果

目標

  • 利用一些小技巧，處理navbar的動畫效果。

實踐步驟

  1. 監聽 window的scroll 事件
  2. 新增 nav的CSS樣式
  3. 判斷頁面高度是否已到達特定高度，切換CSS

成品

[DEMO] | [GitHub]

學習紀錄

此次重點在於動畫的切換時，可以注意的一些小技巧

  1. 當DOM元素position變fixed時，要補足原本佔有的空間
  2. 籍由scale縮放的效果，提升視覺感受
針對fixed，新增的CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* 當有 fixed-nav 時，把 site-wrap 縮放回1，讓整體有放大效果*/
.fixed-nav .site-wrap {
  transform: scale(1);
}

/* 當有 fixed-nav 時，把 nav 固定，並加上陰影*/
.fixed-nav nav {
  position: fixed;
  box-shadow:0 5px 0 rgba(0,0,0,0.1);
}

/* 當有 fixed-nav 時，把logo寬度增加*/
.fixed-nav li.logo {
  max-width: 500px;
}
JS部份
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 取得 nav元素
const nav = document.querySelector('#main');
// 取得 nav頂部 到 <body>頂部 的距離 (目前DOM元素位於父元素的Y座標)
let topOfNav = nav.offsetTop;

function fixNav() {
  if (window.scrollY >= topOfNav) {

    // 注意：
    // 當DOM元素的 position 被設定為 fixed 時，將不會再佔據原有的高度，
    // 所以要動態的增加「原本DOM元素的offsetHeight」，用來補足原本DOM元素的高度，
    // 避免切換position屬性時，造成怪異的彈跳情況。
    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);