在使用 Astra 主題搭建 WordPress 網(wǎng)站時，很多人會希望網(wǎng)站頂部的導(dǎo)航欄能夠在滾動頁面時保持固定，也就是實現(xiàn)所謂的 “粘性頁眉”（Sticky Header）。但這一功能默認只在 Astra Pro 版本中提供。

如果你不打算為 Astra 升級付費，那么本文將教你一個免費實現(xiàn)該效果的方法 —— 通過簡單的 CSS 代碼即可輕松實現(xiàn) Sticky Header，無需插件與 Astra Pro！

什么是粘性頁眉？

粘性頁眉（Sticky Header） 是指：當(dāng)用戶向下滾動網(wǎng)頁時，網(wǎng)站頂部的導(dǎo)航欄仍然保持固定，始終顯示在瀏覽器頂部，方便用戶隨時點擊導(dǎo)航菜單。

實現(xiàn)思路：用自定義 CSS 實現(xiàn)粘性頁眉效果

步驟一：登錄你的 WordPress 后臺

前往WordPress 網(wǎng)站后臺，點擊左側(cè)菜單欄中的 外觀 > 自定義。

步驟二：打開「額外 CSS」面板

在「自定義」界面中，點擊左側(cè)菜單中的 額外 CSS（Additional CSS）。

步驟三：粘貼以下 CSS 代碼

將以下代碼復(fù)制并粘貼到 CSS 編輯區(qū)域中：

.ast-header-break-point .main-header-bar {
    position: sticky;
    top: 0;
    z-index: 999;
    background-color: #ffffff;
    width: 100%;
    transition: all 0.3s ease-in-out;
}

? 粘貼后，立刻看到頂部導(dǎo)航欄已經(jīng)變成可滾動固定了！

可選參數(shù)修改說明

可以根據(jù)需要對以下參數(shù)進行微調(diào)：

• top: 0; —— 控制距離頁面頂部的距離（可以改為 top: 50px;）
• z-index: 999; —— 確保它覆蓋其他內(nèi)容（不要改得太?。?/li>
• background-color —— 修改粘性狀態(tài)下的背景顏色（如 #000000）
• transition —— 設(shè)置粘性時的動畫效果

如果想增加內(nèi)邊距 padding，可復(fù)制下面代碼：

.main-header-bar {
    padding-top: 20px;
    padding-bottom: 20px;
}

移動端自適應(yīng)優(yōu)化（可選）

這段代碼讓粘性導(dǎo)航在手機端也能保持良好的展示效果。

@media (max-width: 768px) {
  .main-header-bar {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}

不懂 CSS？可以讓 ChatGPT 來幫你！

如果你對 CSS 不熟悉，還可以復(fù)制上述代碼片段，讓 ChatGPT 或 AI 工具根據(jù)你的需求（比如改變顏色、間距、陰影）幫你快速修改，非常適合小白用戶。

總結(jié)

即使沒有升級到 Astra Pro，也可以輕松通過自定義 CSS 代碼實現(xiàn) WordPress 網(wǎng)站的粘性頁眉效果。本文的教程只需添加幾行代碼，不用插件也能讓網(wǎng)站實現(xiàn)粘性導(dǎo)航的功能，提升網(wǎng)站體驗和實用性。如果想了解更多WordPress相關(guān)的教程和資訊，請關(guān)注光子波動網(wǎng)，擁有最全的WordPress教程和最活躍的WordPress交流社區(qū)。

聯(lián)系我們
教程看不懂？聯(lián)系我們?yōu)槟赓M解答！免費助力個人，小企站點！	客服微信
① 電話：020-2206-9892
② QQ咨詢：1025174874
③ 郵件：info@361sale.com
④ 工作時間：周一至周五，9:30-18:30，節(jié)假日休息