黏性頁首與頂部欄系統
目的
黏性頁首與頂部欄系統提供了一個全面的框架，用於設計、結構化和行為配置持久的頂部導航堆疊。現代網頁應用和行銷網站經常使用分層的頂部欄——結合促銷公告橫幅、次要工具連結（貨幣/語言選擇器、支援連結、門市搜尋器）和主要導航列。
當這些欄位在滾動時保持固定或黏性時，架構不良的系統會引入嚴重的可用性問題：在行動裝置上消耗過多的垂直視口空間、遮蔽錨點目標內容（scroll-margin-top 不匹配）、在滾動狀態變化期間造成佈局震盪或卡頓、導致與模態框或下拉選單的 z-index 堆疊衝突，以及困住鍵盤焦點或中斷螢幕閱讀器地標導航。此技能建立了針對黏性頁首的設計、空間構成、滾動狀態邏輯、高度樣式和無障礙標準。
使用案例
- 電子商務全球頁首： 多層頂部欄，結合頂部公告橫幅（促銷代碼/免運進度）、工具連結（帳戶登入、地區選擇器、門市搜尋器）以及帶有搜尋列和購物車數量徽章的主要黏性導航。
- SaaS 行銷與產品行銷頁首： 簡潔的主要頁首，在滾動時縮小（減少內邊距/標誌大小）或動態向下滾動時隱藏/向上滾動時顯示，以最大化垂直內容畫布，同時保留即時導航存取。
- 內容入口網站與出版物頁首： 黏性頁首，整合閱讀進度條、分類導航、文章標題指示器以及快速書籤/分享浮動工具。
- 網頁應用與 SaaS 應用外殼： 固定頂部欄，包含麵包屑、活動工作區切換器、命令搜尋觸發器、使用者個人資料選單和即時通知鈴鐺。
何時不應使用
- 畫布內格式化工具列： 對於浮動在內容上方或附加到特定編輯器元件的所見即所得編輯器工具列或批量操作面板，請使用
toolbar-and-action-dock-system。 - 行動底部導航列： 對於固定在行動視口底部的主要行動應用分頁，請使用
bottom-navigation-system。 - 完整側邊導航外殼： 對於主要導航由可折疊左側邊欄軌道驅動的複雜 SaaS 網頁應用，請使用
sidebar-navigation-system。 - 浮動動作面板： 對於固定在視口角落的浮動上下文按鈕（例如聊天小工具、回到頂部 FAB），請使用
sticky-and-floating-ui-system。
輸入
- 頂部欄層級架構： 指定存在的層級（例如，第 1 層：公告欄，第 2 層：工具列，第 3 層：主要導航）。
- 滾動行為模型： 所需的黏性機制（
sticky-always、shrink-on-scroll、hide-on-scroll-down / reveal-on-scroll-up或static-to-sticky）。 - 表面與主題 Token： 背景表面顏色、邊框 token、背景模糊效果（
backdrop-filter: blur()）以及來自elevation-and-depth-system和accessible-color-system的高度陰影。 - 視口與裝置目標： 用於將多層桌面頂部欄折疊為統一行動頂部欄的斷點閾值（
< 768px、< 1024px、≥ 1024px）。
輸出
- 黏性頁首佈局與堆疊規範： 定義固定/黏性定位的 CSS Grid/Flexbox 結構、CSS 自訂屬性偏移變數（
--header-height）以及 z-index 層級縮放。 - 滾動狀態轉場與動作規則： 滾動監聽邏輯、閾值偏移、CSS 過渡類別（
.is-scrolled、.is-hidden）和硬體加速變換（transform: translateY()）的技術規範。 - 響應式行動折疊規範： 將多行桌面頂部欄轉換為單一緊湊行動頁首（附帶抽屜式切換觸發器）的佈局規則。
- WCAG AA 無障礙藍圖： 跳至主要內容連結實作（
.skip-link）、針對標題錨點的scroll-margin-top偏移補償、避免鍵盤焦點陷阱以及螢幕閱讀器地標結構（<header>、<nav>、role="banner"）。
工作流程
1. 結構化頂部欄堆疊層級
確定多層頂部欄組成，並建立語意 HTML 佈局：
- 語意 HTML 容器： 將所有頂部欄包裹在一個
<header role="banner">標籤內，以為螢幕閱讀器使用者維持一個清晰的橫幅地標。 - 第 1 層：公告欄（
<aside>或<div>）： 絕對頂部的高優先級微橫幅（例如，免運門檻、系統警報）。 - 第 2 層：工具列（
<div class="utility-bar">）： 輔助連結、語言/貨幣選擇器、聯絡連結、客戶支援。 - 第 3 層：主要導航（
<nav aria-label="Main Navigation">）： 品牌標誌、主要區段連結、搜尋輸入框、帳戶連結、購物車或主要 CTA。
2. 定義定位與滾動機制
根據內容密度和視口限制選擇黏性實作方法：
position: sticky與position: fixed：- 當允許在鎖定到頂部之前進行自然文件流時，優先對容器使用
position: sticky; top: 0; z-index: 1000;。 - 當主體內容明確使用
padding-top: var(--header-height);時，使用position: fixed; top: 0; left: 0; right: 0;。
- 當允許在鎖定到頂部之前進行自然文件流時，優先對容器使用
- 多層滾動折疊策略：
- 當滾動超過一個閾值（例如，
scrollY > 50px）時，公告欄和工具列自然滾出視野，而主要導航鎖定（position: sticky; top: 0;），或者整個頁首進行轉場。 - 動態計算 CSS 自訂屬性（例如，
--header-height），以便主要頁面內容和錨點連結能正確調整。
- 當滾動超過一個閾值（例如，
3. 實作滾動狀態轉場與微互動
隨著使用者向下滾動頁面，增強頁首的人體工學：
- 滾動縮放轉場：
- 預設狀態（在頂部）：頁首高度
80px，標誌高度40px，內邊距1.25rem 2rem。 - 滾動狀態（
.is-scrolled）：頁首高度60px，標誌高度30px，內邊距0.75rem 2rem。 - 平滑動畫：使用硬體加速的 CSS 轉場（
transition: padding 0.25s ease, height 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;）。
- 預設狀態（在頂部）：頁首高度
- 動態隱藏/顯示（智慧頁首）：
- 向下滾動（
scrollY > lastScrollY && scrollY > 150px）：套用transform: translateY(-100%);將頁首滑出螢幕，最大化閱讀視口。 - 向上滾動（
scrollY < lastScrollY）：套用transform: translateY(0);以立即顯示導航。
- 向下滾動（
- 表面高度與背景模糊：
- 在頁面頂部：背景半透明或平面背景，無陰影。
- 滾動時：添加實心/玻璃態表面（
background-color: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px);）和高度陰影（box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);）。
4. 配置行動視口適應
行動視口（< 768px）的垂直空間嚴重受限：
- 行動頁首高度上限： 將行動黏性頁首高度上限設定為56px–64px，以避免消耗超過 10% 的行動螢幕高度。
- 行動層級減少： 在行動裝置上隱藏次要工具列，將工具連結轉移到可折疊的行動導航抽屜中。
- 公告欄整合： 將公告文字壓縮為簡潔的微文案或自動輪播跑馬燈，或將其靜態保留在黏性主要頁首上方。
5. 強制執行 WCAG AA 無障礙與焦點管理
- 跳至主要內容連結： 提供一個頂層跳過連結，作為第一個可聚焦的元素（
<a href="#main-content" class="skip-link">Skip to main content</a>）。當透過Tab鍵聚焦時，將其可見地定位在黏性頁首上方（top: 1rem; left: 1rem; z-index: 9999;）。 - 錨點目標滾動邊距（
scroll-margin-top）： 防止使用者點擊內部錨點連結或目錄項目時，黏性頁首與標題重疊：:target, [id] { scroll-margin-top: calc(var(--header-height) + 1.5rem); } - 鍵盤導航與下拉選單： 確保所有頁首下拉選單（巨型選單、帳戶選單、行動漢堡選單切換）可完全透過
Tab、Enter、Space和Escape鍵操作。 - Prefers-Reduced-Motion： 尊重使用者的動作偏好，停用滑動變換和佈局轉場：
@media (prefers-reduced-motion: reduce) { .site-header { transition: none !important; } }
決策規則
黏性滾動機制選擇矩陣
| 網站類型 | 建議滾動行為 | 行動適應 | 理由 |
|---|---|---|---|
| 電子商務商店 | 黏性主要導航 + 靜態頂部欄 | 頂部促銷橫幅滾走；主要導航保持黏性（56px） | 保持搜尋、購物車計數和分類始終可存取，以最大化轉換率。 |
| SaaS 登陸/行銷頁面 | 滾動縮放或智慧隱藏/顯示 | 統一的 60px 頁首；向下滾動時隱藏，向上滾動時顯示 | 最大化視覺英雄畫布和閱讀空間，同時在使用者意圖時提供即時導航存取。 |
| 內容部落格/編輯 | 智慧隱藏/顯示與閱讀進度 | 帶有滾動進度條指示器的緊湊頂部欄 | 為長篇閱讀提供 100% 的視口空間，在反向滾動時立即返回導航。 |
| 網頁應用/儀表板 | 固定始終可見頁首 | 固定單行頁首（56px） | 作為應用工具外殼；動態隱藏會在工作流程中造成迷失方向。 |
Z-Index 層級縮放
在整個設計系統中維持嚴格的 z-index 編排：
z-index: 10000; -> 跳至內容連結（聚焦時）
z-index: 9000; -> 模態對話框/燈箱
z-index: 8000; -> 行動導航抽屜/覆蓋層
z-index: 7000; -> 全域通知與通知橫幅
z-index: 1000; -> 黏性/固定頂部頁首堆疊
z-index: 500; -> 上下文工具列與浮動面板
z-index: 1; -> 堆疊上下文內容卡片
限制條件
- 無障礙（WCAG 2.1 AA）：
- SC 2.4.1 跳過區塊： 必須在頁首導航之前包含一個可見的「跳至主要內容」連結。
- SC 1.4.3 對比度： 頁首文字、圖示和選單觸發器在滾動和未滾動的頁首狀態下都必須滿足最低 4.5:1 的對比度。
- SC 2.4.7 焦點可見： 當透過 Tab 鍵穿梭於黏性頁首元素上時，焦點指示器必須保持完全可見且不被裁剪，無論背景顏色為何。
- 效能與渲染：
- 滾動監聽器必須透過
requestAnimationFrame或IntersectionObserver進行節流或綁定，以避免在滾動事件期間強制同步佈局震盪。 - 模糊濾鏡（
backdrop-filter）必須謹慎範圍限定，並在低功率行動裝置上測試 GPU 延遲。
- 滾動監聽器必須透過
- 視口佈局保護： 行動裝置上的黏性頁首在黏性狀態下，高度永遠不得超過 64px 或視覺視口高度的 15%。
常見失敗模式
- 錨點內容重疊錯誤： 點擊內部連結（
#section-2）會將章節標題直接滾動到黏性頁首下方，使標題不可見，因為省略了scroll-margin-top。 - 視口螢幕佔用過多： 在行動螢幕上保持 140px 的多層桌面頁首為黏性，導致行動螢幕少於 60% 的空間用於實際頁面內容。
- 滾動佈局震盪： 在未經節流的
window.onscroll監聽器中查詢header.offsetHeight，導致佈局震盪和卡頓的 30fps 滾動。 - Z-Index 堆疊衝突： 為黏性頁首賦予
z-index: 999999，導致其在模態背景覆蓋層或全螢幕燈箱上顯得尷尬。 - 焦點指示器裁剪： 將元素放置在具有
overflow: hidden的固定容器內，導致頂部/底部連結的焦點環在視覺上被切斷。
驗證標準
- 頁首容器使用語意的
<header role="banner">，子導航封裝在<nav aria-label="...">中。 - 「跳至主要內容」連結存在，可作為第一個鍵盤 Tab 目標到達，並在聚焦時可見地位於黏性頁首上方。
- 內部錨點連結目標元素設置的
scroll-margin-top等於或超過最大黏性頁首高度。 - 行動黏性頁首高度不超過 64px，次要頂部欄已折疊到行動抽屜中。
- 滾動狀態轉場（縮小或隱藏/顯示）使用硬體加速的 CSS 屬性（
transform、opacity）並節流滾動計算。 - 跨透明、滾動或模糊玻璃狀態的文字和圖示對比度滿足 WCAG AA 標準（≥4.5:1 比率）。
- Z-index 層級遵循系統縮放（頁首在
z-index: 1000，低於模態框和抽屜）。