在網站設計中，固定頁眉（Sticky Header）是一種常見的功能，它可以讓導航欄始終顯示在頁面頂部，即使用戶滾動頁面也不會消失。這種設計不僅提升了用戶體驗，還能方便訪問者隨時跳轉到其他頁面。本文將詳細介紹如何在WordPress中實現固定頁眉的功能。
方法一：使用WordPress主題自帶功能
許多現代WordPress主題（如Astra、OceanWP、GeneratePress等）內置了固定頁眉選項。以下是操作步驟：
- 登錄WordPress后臺，進入“外觀” > “自定義”。
- 找到“頁眉”或“Header”設置選項（不同主題名稱可能不同）。
- 查找“固定頁眉”（Sticky Header）或“滾動時固定”選項，勾選啟用。
- 保存設置并預覽效果。
如果你的主題支持，還可以調整固定頁眉的背景顏色、透明度或動畫效果。
方法二：通過插件實現
如果主題不支持固定頁眉，可以通過插件輕松實現。推薦以下插件：
- Sticky Menu (or Anything!) on Scroll：簡單易用，支持固定導航欄或其他元素。
- Elementor Pro（如果使用Elementor頁面編輯器）：內置“固定頁眉”功能。
操作步驟：
- 安裝并激活插件（以“Sticky Menu”為例）。
- 進入插件設置，選擇需要固定的元素（通常是導航欄的CSS類或ID）。
- 設置滾動偏移量、動畫效果等參數。
- 保存后查看效果。
方法三：手動添加CSS代碼
如果你熟悉代碼，可以通過自定義CSS實現固定頁眉：
- 進入WordPress后臺，打開“外觀” > “自定義” > “附加CSS”。
- 輸入以下代碼（假設你的頁眉CSS類為
.site-header）：
.site-header {
position: sticky;
top: 0;
z-index: 999;
width: 100%;
}
- 保存后刷新頁面即可生效。
注意事項
- 移動端適配：固定頁眉可能會占用屏幕空間，需確保在移動設備上顯示正常。
- 性能優(yōu)化：過多的CSS或插件可能影響加載速度，建議優(yōu)先使用主題自帶功能。
- 兼容性測試：在不同瀏覽器（Chrome、Firefox、Safari等）中檢查效果。
通過以上方法，你可以輕松為WordPress網站添加固定頁眉功能，提升用戶體驗和導航便捷性！
