一、什么是固定頁眉？

固定頁眉（Sticky Header）是指當(dāng)用戶滾動(dòng)網(wǎng)頁時(shí)，頁眉部分始終保持在瀏覽器窗口的頂部，不隨頁面滾動(dòng)而消失。這種設(shè)計(jì)能提升用戶體驗(yàn)，方便訪客隨時(shí)訪問導(dǎo)航菜單、搜索框或重要按鈕。

二、實(shí)現(xiàn)固定頁眉的3種方法

方法1：使用WordPress主題自帶功能

許多現(xiàn)代WordPress主題（如Astra、OceanWP、GeneratePress）已內(nèi)置固定頁眉選項(xiàng)。操作步驟如下：

1. 進(jìn)入 外觀 > 自定義
2. 找到 頁眉（Header） 設(shè)置
3. 啟用 固定頁眉 或 Sticky Header 選項(xiàng)
4. 根據(jù)需要調(diào)整滾動(dòng)時(shí)的樣式（如透明背景、陰影效果等）

方法2：通過CSS代碼實(shí)現(xiàn)

若主題不支持固定頁眉，可添加自定義CSS：

1. 進(jìn)入 外觀 > 自定義 > 附加CSS
2. 輸入以下代碼（根據(jù)實(shí)際類名調(diào)整）：

.site-header {
position: sticky;
top: 0;
z-index: 999;
background: #fff; /* 背景色可修改 */
box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 可選陰影效果 */
}

方法3：使用插件（適合新手）

推薦插件：

• Sticky Menu (or Anything!) on Scroll
• Qode Header Builder 安裝后通過可視化界面設(shè)置固定頁眉，無需編碼。

三、常見問題與優(yōu)化建議

1. 固定頁眉遮擋內(nèi)容？

在CSS中添加 padding-top 到頁面主體：

body {
padding-top: 100px; /* 數(shù)值需匹配頁眉高度 */
}

2. 滾動(dòng)時(shí)改變頁眉樣式？

使用以下CSS實(shí)現(xiàn)滾動(dòng)特效：

.site-header.scrolled {
background: rgba(255,255,255,0.9);
height: 60px; /* 滾動(dòng)后高度 */
transition: all 0.3s;
}

3. 移動(dòng)端適配

通過媒體查詢調(diào)整小屏幕樣式：

@media (max-width: 768px) {
.site-header {
position: static; /* 移動(dòng)端取消固定 */
}
}

四、總結(jié)

固定頁眉是提升網(wǎng)站易用性的有效設(shè)計(jì)，無論是通過主題設(shè)置、CSS代碼還是插件，都能輕松實(shí)現(xiàn)。建議優(yōu)先測試主題自帶功能，再根據(jù)需求選擇進(jìn)階方案。完成后務(wù)必在不同設(shè)備上測試效果，確保用戶體驗(yàn)一致流暢。