如何在 Astra 主题中添加粘性页眉（Sticky Header）

很多网站现在都采用固定顶部导航的设计，也就是粘性页眉。这是一种常见的设计方式，当页面向下滚动时，顶部导航始终显示在屏幕上方，有助于快速返回菜单或其他重要链接区域。

什么是粘性页眉

粘性页眉是在页面滚动时仍然固定在顶部的页眉部分。使用它可以让导航菜单始终处于可见位置，减少跳转步骤，提升访问效率。

使用前的准备

粘性页眉功能属于 Astra Pro 插件的一部分，需先安装 Astra 主题与 Astra Pro Addon 插件。插件激活后，进入后台开启相关模块。

开启粘性页眉的步骤

• 安装并激活 Astra Pro 插件
• 进入后台，点击 Astra > Dashboard，开启 Sticky Header 模块

• 进入外观 > 自定义 > Header Builder > Sticky Header，进入设置页面

粘性页眉的可用设置

固定主要页眉
启用后，主导航在页面滚动时保持固定显示。

固定上方与下方页眉区域
如果使用了 Above Header 或 Below Header，可单独设置它们是否固定。

• Above Header 常用于添加按钮、菜单、联系方式等信息
• Below Header 可放置搜索框、辅助菜单或简短公告

需要先开启 Header Sections 模块才能看到相关设置。

Logo 与样式调整

设置不同 Logo
支持为粘性页眉设置不同的 Logo，保持与主站 Logo 分离的设计风格。

添加 Retina Logo
支持上传高清版本的 Logo，适配高分辨率设备。

调整 Logo 宽度
可使用滑动条控制 Logo 显示的宽度，适配不同设备尺寸。

设置背景颜色与透明度
若启用了 Colors and Background 模块，可对粘性页眉设置背景颜色。背景透明度也可以调整，实现视觉上的层次感。

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

在 Astra 主题 4.1.0 及以上版本中，粘性页眉新增了背景模糊效果，能为导航栏增添轻柔的模糊层次，使页面看起来更具现代感。该功能依赖背景颜色的透明度设置，并需在设计面板中手动开启。

操作步骤如下：

• 在开启 Sticky Header 模块后，前往 外观 > 自定义 > Header > Sticky Header

• 点击 Primary Header 区块，进入“设计”选项卡

• 找到“Background Blur”选项并开启

• 建议设置背景颜色为半透明，以使模糊效果更加明显自然

这项功能仅适用于启用了 Primary Header 的粘性状态，并且为 Astra Pro 插件提供的增强功能之一。

外观增强设置

缩小效果（Shrink Effect）
启用后，粘性页眉在滚动状态下会自动变小，节省页面空间。

动画效果
可添加进入动画，使粘性页眉更具动感。

向下滚动时隐藏
启用后，页面向下滚动时隐藏粘性页眉，向上滚动时再次出现。这一选项需与 Stick Primary Header 同时使用。

选择在哪些设备上显示
可以设置仅在桌面、移动设备，或两者上同时启用粘性页眉。

去除阴影样式（可选）

如果不需要默认的阴影效果，可添加以下 CSS 代码：

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

总结

Astra Pro 的粘性页眉功能不仅配置简洁，还支持多种视觉细节设置，包括背景模糊、Logo 切换、动画、缩放等效果。通过合理使用这些选项，可以打造出美观、清晰、易操作的导航栏，提升整站的整体感观。

相关文章

联系我们
教程看不懂？联系我们为您免费解答！免费助力个人，小企站点！	客服微信
① 电话：020-2206-9892
② QQ咨询：1025174874
③ 邮件：info@361sale.com
④ 工作时间：周一至周五，9:30-18:30，节假日休息