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

Repository metrics

Stars

57 stars (57 stars)

PR merge metrics

30d に merged PR はありません (30d に merged PR はありません)

説明

コントリビューターガイド

調査方針

このタスクは、Intersection Observer API を実装して、ヘッダーがビューポート内にないときに非表示にするものです。まず、ヘッダーコンポーネント（おそらく src/components/Header.tsx など）を見つけてください。ヘッダー要素を監視する IntersectionObserver を作成する effect を追加します。交差率が 0 の場合、ヘッダーを非表示にする CSS クラス（例：display: none）を追加します。ヘッダーが再び表示されるようになったときに確実に再表示されるようにします。スクロール時の動作をテストします。パフォーマンスへの影響を考慮し、レイアウトシフトが発生しないことを確認してください。

技術スタック

typescript

領域

frontend

Issue 種別

パフォーマンス

難度新しい貢献者にとっての実装難度です。1 は非常に小さな変更、5 は専門的な作業です。

2

推定時間経験ある貢献者が調査、実装、テスト、pull request 準備にかけるおおよその時間範囲です。

半日

活動状況Issue が今どれだけ取り組みやすいかを示します。新しい、活発、古い、ブロック中、またはメンテナー入力待ちなどです。

新着

明確さ期待される変更、受け入れ条件、次の手順がどれだけ明確かを示します。

明確

前提条件

JavaScriptIntersection Observer API

初心者向け度初回貢献者にどれだけ取り組みやすいかを 1-100 で推定したスコアです。

70