很多網(wǎng)站現(xiàn)在都采用固定頂部導(dǎo)航的設(shè)計(jì)，也就是粘性頁(yè)眉。這是一種常見(jiàn)的設(shè)計(jì)方式，當(dāng)頁(yè)面向下滾動(dòng)時(shí)，頂部導(dǎo)航始終顯示在屏幕上方，有助于快速返回菜單或其他重要鏈接區(qū)域。

什么是粘性頁(yè)眉

粘性頁(yè)眉是在頁(yè)面滾動(dòng)時(shí)仍然固定在頂部的頁(yè)眉部分。使用它可以讓導(dǎo)航菜單始終處于可見(jiàn)位置，減少跳轉(zhuǎn)步驟，提升訪問(wèn)效率。

使用前的準(zhǔn)備

粘性頁(yè)眉功能屬于 Astra Pro 插件的一部分，需先安裝 Astra 主題與 Astra Pro Addon 插件。插件激活后，進(jìn)入后臺(tái)開(kāi)啟相關(guān)模塊。

開(kāi)啟粘性頁(yè)眉的步驟

• 安裝并激活 Astra Pro 插件
• 進(jìn)入后臺(tái)，點(diǎn)擊 Astra > Dashboard，開(kāi)啟 Sticky Header 模塊

• 進(jìn)入外觀 > 自定義 > Header Builder > Sticky Header，進(jìn)入設(shè)置頁(yè)面

粘性頁(yè)眉的可用設(shè)置

固定主要頁(yè)眉
啟用后，主導(dǎo)航在頁(yè)面滾動(dòng)時(shí)保持固定顯示。

固定上方與下方頁(yè)眉區(qū)域
如果使用了 Above Header 或 Below Header，可單獨(dú)設(shè)置它們是否固定。

• Above Header 常用于添加按鈕、菜單、聯(lián)系方式等信息
• Below Header 可放置搜索框、輔助菜單或簡(jiǎn)短公告

需要先開(kāi)啟 Header Sections 模塊才能看到相關(guān)設(shè)置。

Logo 與樣式調(diào)整

設(shè)置不同 Logo
支持為粘性頁(yè)眉設(shè)置不同的 Logo，保持與主站 Logo 分離的設(shè)計(jì)風(fēng)格。

添加 Retina Logo
支持上傳高清版本的 Logo，適配高分辨率設(shè)備。

調(diào)整 Logo 寬度
可使用滑動(dòng)條控制 Logo 顯示的寬度，適配不同設(shè)備尺寸。

設(shè)置背景顏色與透明度
若啟用了 Colors and Background 模塊，可對(duì)粘性頁(yè)眉設(shè)置背景顏色。背景透明度也可以調(diào)整，實(shí)現(xiàn)視覺(jué)上的層次感。

添加背景模糊效果（Background Blur）

在 Astra 主題 4.1.0 及以上版本中，粘性頁(yè)眉新增了背景模糊效果，能為導(dǎo)航欄增添輕柔的模糊層次，使頁(yè)面看起來(lái)更具現(xiàn)代感。該功能依賴背景顏色的透明度設(shè)置，并需在設(shè)計(jì)面板中手動(dòng)開(kāi)啟。

操作步驟如下：

• 在開(kāi)啟 Sticky Header 模塊后，前往 外觀 > 自定義 > Header > Sticky Header

• 點(diǎn)擊 Primary Header 區(qū)塊，進(jìn)入“設(shè)計(jì)”選項(xiàng)卡

• 找到“Background Blur”選項(xiàng)并開(kāi)啟

• 建議設(shè)置背景顏色為半透明，以使模糊效果更加明顯自然

這項(xiàng)功能僅適用于啟用了 Primary Header 的粘性狀態(tài)，并且為 Astra Pro 插件提供的增強(qiáng)功能之一。

外觀增強(qiáng)設(shè)置

縮小效果（Shrink Effect）
啟用后，粘性頁(yè)眉在滾動(dòng)狀態(tài)下會(huì)自動(dòng)變小，節(jié)省頁(yè)面空間。

動(dòng)畫效果
可添加進(jìn)入動(dòng)畫，使粘性頁(yè)眉更具動(dòng)感。

向下滾動(dòng)時(shí)隱藏
啟用后，頁(yè)面向下滾動(dòng)時(shí)隱藏粘性頁(yè)眉，向上滾動(dòng)時(shí)再次出現(xiàn)。這一選項(xiàng)需與 Stick Primary Header 同時(shí)使用。

選擇在哪些設(shè)備上顯示
可以設(shè)置僅在桌面、移動(dòng)設(shè)備，或兩者上同時(shí)啟用粘性頁(yè)眉。

去除陰影樣式（可選）

如果不需要默認(rèn)的陰影效果，可添加以下 CSS 代碼：

#ast-fixed-header .main-header-bar {
	box-shadow: unset;
}

總結(jié)

Astra Pro 的粘性頁(yè)眉功能不僅配置簡(jiǎn)潔，還支持多種視覺(jué)細(xì)節(jié)設(shè)置，包括背景模糊、Logo 切換、動(dòng)畫、縮放等效果。通過(guò)合理使用這些選項(xiàng)，可以打造出美觀、清晰、易操作的導(dǎo)航欄，提升整站的整體感觀。

相關(guān)文章

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