本頁只練什麼
能用 scroll-margin-top 為錨點保留 sticky header 高度，避免目標標題被遮住。
頁內連結成功改變 hash 不代表內容可見；固定頁首遮住目標會讓鍵盤與讀者失去位置線索。
要修改的檔案：files/starter/style.css
定位：先確認 href hash 與 target id 一致，再量 header height。｜依 starter-4 定位，只修改「scroll-margin-top」的責任。
LESSON-11 · TOPIC 04
scroll-margin-top
能用 scroll-margin-top 為錨點保留 sticky header 高度，避免目標標題被遮住。
任務情境
先結果，再原理；完成後要能說出自己看見的證據。
現在的問題
點擊『服務方案』目錄後網址出現 #plans，但 h2 被72px sticky header 完全遮住。
起始狀態：目標 id 存在，scroll-margin-top:0，header 高72px。
完成後要看到
runtime 由0px變72px；required facts 顯示 targetTop 大於等於 headerHeight。
驗收證據：現有 runtime before=0px、after=72px；required facts 包含 targetTop、headerHeight、scrollTop
何時會用到
sticky/fixed header 搭配章節目錄、skip link 或 hash navigation 時。
常見混淆：scroll-padding-top 通常設在 scroll container；scroll-margin-top 設在個別 target。
觀念與最小範例
這段程式是理解起點，不是要你直接跳過 Starter。
scroll-margin-top Scroll margin before an anchor target
錨點捲到上方時，先替它預留頁首的高度，不要讓標題躲在頁首後面。
正式說法：scroll-margin-top defines the target scroll snap area outset on the block-start side and affects scroll-into-view positioning。
.section-heading{scroll-margin-top:4.5rem}三步完成本主題
每一步都留下可觀察結果；如果沒看到，先看「卡住先查」。
Step 1｜先看見目前缺口，不急著貼答案。
檔案：
files/starter/style.css定位：先確認 href hash 與 target id 一致，再量 header height。要做：先重新載入 Starter，記錄目前畫面、DOM、Computed、Console 或文件內容。
預期：能指出「先確認 href hash 與 target id 一致，再量 header height。」目前的缺口。
證據：保存 files/starter/style.css 的目前狀態，並指出下一步只會修改哪個檔案責任。
卡住先查：確認開啟的是 files/starter/style.css，且定位到 先確認 href hash 與 target id 一致，再量 header height。。
Step 2｜只修改本主題的一個責任。
檔案：
files/starter/style.css定位：先確認 href hash 與 target id 一致，再量 header height。要做：執行實驗切換 anchor-offset class，讀取 scroll-margin-top；完整 probe 捲到目標並比較 headerHeight/targetTop。
預期：runtime 由0px變72px；required facts 顯示 targetTop 大於等於 headerHeight。
證據：現有 runtime before=0px、after=72px；required facts 包含 targetTop、headerHeight、scrollTop
卡住先查：先確認 href hash 與 target id 一致，再量 header height。
Step 3｜重新載入並以證據驗收，不以『看起來差不多』判定完成。
檔案：
files/starter/style.css定位：先確認 href hash 與 target id 一致，再量 header height。要做：重新整理頁面，再逐項比對預期結果與 evidence。
預期：runtime 由0px變72px；required facts 顯示 targetTop 大於等於 headerHeight。
證據：現有 runtime before=0px、after=72px；required facts 包含 targetTop、headerHeight、scrollTop
卡住先查：先確認 href hash 與 target id 一致，再量 header height。
觀察示範
這個示範只讓你看懂概念，不會替你修改 Starter，也不會自動宣告完成。
scroll-margin-topruntime fixture · read-only demo
本主題示範畫面：頁內導覽
服務方案
驗收證據
勾選只是學習紀錄；真正完成仍要回到 Starter 的實際結果。
提示 1｜方向
先證明連結有找到目標，不要把遮擋誤判為 href 錯誤。
提示 2｜關鍵片段
在 target 設 scroll-margin-top:72px。
提示 3｜完整解答與原因
完整解答與原因：scroll-margin-top 擴張目標的捲動定位範圍，scrollIntoView 後標題停在 sticky header 下方。