# [JS30] Day.24 Sticky Nav
###### tags: `JS30`
## 任務 Task
當滑到導覽列時，固定導覽列，並有 logo 從左滑出的效果。

==完成時間：10min==
## 步驟 Step
1. 監聽 `window` 的 `scroll event`。
2. 當導覽列的 `offsetTop` 小於 `window.scrollY` 時，加入 `position: fixed` 的 `class` 使導覽列固定住，其他情況則 `remove`。
3. 因為 `position: fixed` 的效果，會造成導覽列的位置浮出，而底下資料往上移。所以在 `fixed` 同時更改 `document.body.style.paddingTop` 為導覽列的高度，其他情況則設 0 。
4. logo 滑出效果則在 `CSS` 裡設定。
## 筆記 Note
### <font color=#337EA9>CSS fixed & sticky 的差別</font>
1. `fixed` 會獨立一層，脫離文件，`sticky` 不會。
2. `fixed` 固定在視窗範圍，滾動頁面時，物件不會移動；`sticky` 固定在父層，滾動在父層時，物件不會移動，滾動滑出父層時，物件會跟著移動。