---
# System prepended metadata

title: "\U0001F3C5 Day 38 - 第八週 navbar 滾動加入背景色"
tags: [網頁切版直播班 - 2025 夏季]

---

# 🏅 Day 38 - 第八週 navbar 滾動加入背景色

今天我們要來實作[設計稿](https://www.figma.com/design/3bEeuchVUYwmA2PuHAxQVN/%E5%85%AD%E8%A7%92%EF%BD%9CZOBAA--%E6%97%85%E9%81%8A%E7%B6%B2%E7%AB%99--student-ver.%EF%BC%89?node-id=187-42866&t=5AlabPrdrhdhVE5A-0)的 navbar 互動效果，這邊會運用 [scroll-timeline](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-timeline) 語法來實現
scroll-timeline 是 CSS 中的一個新功能，它屬於 滾動驅動動畫 (Scroll-Driven Animations) 的一部分，讓你的 CSS 動畫不再只依賴「時間」來播放，而是依賴「滾動軸的位置」來播放。

### 使用方式
1. 定義一個滾動時間軸 (scroll-timeline-name 和 scroll-timeline-axis)
```css=
html {
    scroll-timeline-name: --my-scroll-progress; /* 給這個時間軸一個名字 */
    scroll-timeline-axis: block; /* 監聽垂直滾動（Y軸） */
}
```

2. 將動畫與滾動時間軸綁定 (animation-timeline)
```css=
.my-element {
    animation: my-animation forwards; /* 你的 @keyframes 動畫 */
    animation-timeline: --my-scroll-progress; /* 將動畫綁定到先前定義的滾動時間軸 */
}
@keyframes my-animation {
  from {
    /* 0% 狀態 */
    ...
  }
  to {
    /* 100% 狀態 */
    ...
  }
}
```

3. 定義動畫的觸發範圍 (animation-range)
```css=
.my-element {
    /* ... 其他動畫設定 ... */
    animation-range: 0px 300px; /* 動畫從 0px 滾動到 300px 後完成 */
}
```

範例參考：
<iframe height="300" style="width: 100%;" scrolling="no" title="scroll-timeline DEMO" src="https://codepen.io/fhljksmg-the-styleful/embed/bNVNgPG?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/fhljksmg-the-styleful/pen/bNVNgPG">
  scroll-timeline DEMO</a> by 脆脆 (<a href="https://codepen.io/fhljksmg-the-styleful">@fhljksmg-the-styleful</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>


### 題目
使用此 [CodePen 範本](https://codepen.io/fhljksmg-the-styleful/pen/dPYPNBj?editors=1100)，將 CSS 區塊的 html 標籤加上對應的 scroll-timeline 設定，使其能根據滾動軸改變 navbar 背景。

## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 
解答位置請參考下圖（需打開程式碼的部分觀看）

![](https://i.imgur.com/vftL5i0.png)

<!-- 解答：https://codepen.io/fhljksmg-the-styleful/pen/JoYjpvX?editors=1100
-->




回報區
---

|#|Discord|CodePen / 答案|
|:----:|:----:|:----:|
|  01  |  老屠  |[Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/WbQjVpb?editors=1100) |
|  02  |  Chia__ |[Codepen](https://codepen.io/Chia-the-encoder/pen/gbaWVeN) |
|  03  |  Tetsu  |[Codepen](https://codepen.io/ttgchang/pen/PwPmrgy) |
|  04  |  地瓜  |[Codepen](https://codepen.io/ChippyYU/pen/vENmodv?editors=1100) |
|  05  |  RUDY  |[Codepen](https://codepen.io/Rudy-crw/pen/MYaogPq?editors=1100) |
|  06  |  ja4071  |[Codepen](https://codepen.io/SHAO-L/pen/ogjwNGB?editors=1100) |
|  07  |  Nooooora |[Codepen](https://codepen.io/Nora-Ch/pen/ogjwXGK?editors=1100)|
|  08  |  小懿  |[Codepen](https://codepen.io/YT-the-vuer/pen/PwPjPoK) |
|  09  |  Kiku  |[Codepen](https://codepen.io/Kiku0110/pen/gbaRayj?editors=1100) |
|  10  |  平平  |[Codepen](https://codepen.io/ypinpin/pen/vENZGaL) |
 |  11  |  Sam.S.T.Y  |[Codepen](https://codepen.io/Sam-Yang-the-animator/pen/OPygXPx?editors=1100) | -->
|  12  |  7lun  |[Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/ZYbyOvg?editors=1100) |
|  13  |  登登登  |[Codepen](https://codepen.io/Duncanin/pen/JoYJRGy?editors=1100) |
|  14  |  An  |[Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/OPygRpG?editors=1100) |
|  15 |  Pstor  |[Codepen](https://codepen.io/peter_hung/pen/WbQOEdb) |
|  16  |  社子畢卡索  |[Codepen](https://codepen.io/pen?template=WbQOzqm) |
|  17  |  cks40660  |[Codepen](https://codepen.io/CKS40660/pen/MYaoMQR) |
|  18  |  KOMATSU PEI  |[Codepen](https://codepen.io/Komatsu2021/pen/MYavwZG?editors=1100) |
|  19  |  Leonard  |[Codepen](https://codepen.io/hyyfjqra-the-sans/pen/JoYybVV?editors=0100) | 
|  20  |  PK  |[Codepen](https://codepen.io/Percy-Ku/pen/MYavQmv) |
|  21  |  伊迪  |[Codepen](https://codepen.io/eku10rei/pen/gbaKmwJ?editors=0110) |
|  22  |  Chris Wang  |[Codepen](https://codepen.io/Wang-Chris/pen/KwdrBjR) |
| 23 |  Rogan  |[Codepen](https://codepen.io/RoganHsu/pen/YPyBqja?editors=1100) | >
| 24 |  NGNLzenos  |[Codepen](https://codepen.io/hzpjunua-the-bashful/pen/XJXXPKz?editors=1100) | >
| 25 |  星雪糖  |[Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/azNgBra?editors=1100) | >
<!-- 快速複製 -->
<!-- |  排序  |  姓名  |[Codepen](連結) | -->