perf: improve header performance by hiding when not in view (Intersection Observer API)

倉庫指標

Star

57 star (57 star)

PR 合併指標

30 天內沒有已合併 PR (30 天內沒有已合併 PR)

描述

貢獻者指南

研究方向

此任務涉及實作 Intersection Observer API，以便在頁首不在視口內時將其隱藏。首先找到頁首元件（可能在 src/components/Header.tsx 或類似位置）。新增一個 effect，建立 IntersectionObserver 來觀察頁首元素。當交叉比例為 0 時，新增一個 CSS 類別來隱藏頁首（例如 display: none）。確保頁首再次可見時重新出現。測試捲動時的行為。考慮效能影響，並確保不會發生版面偏移。

技術棧

typescript

領域

frontend

議題類型

效能

難度面向新貢獻者的預計實作難度，1 表示很小改動，5 表示專家級工作。

2

預計時間有經驗貢獻者完成調查、實作、測試並準備 pull request 的粗略時間範圍。

半天

活動狀態議題目前的可參與程度：新鮮、活躍、陳舊、阻塞或等待維護者輸入。

新近可參與

清晰度議題是否清楚說明預期改動、驗收標準和下一步。

清晰

前置要求

JavaScriptIntersection Observer API

新手友善度1-100 的估計分數，表示該議題對首次貢獻者的友善程度。

70