# 🏅 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)

html {
    scroll-timeline-name: --my-scroll-progress; /* 給這個時間軸一個名字 */
    scroll-timeline-axis: block; /* 監聽垂直滾動（Y軸） */
}

2. 將動畫與滾動時間軸綁定 (animation-timeline)

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

3. 定義動畫的觸發範圍 (animation-range)

.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://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](連結) | -->