如何在 Astra 主题中添加粘性页眉(Sticky Header)

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

20250411094457311-image

什么是粘性页眉

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

使用前的准备

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

开启粘性页眉的步骤

  • 安装并激活 Astra Pro 插件
  • 进入后台,点击 Astra > Dashboard,开启 Sticky Header 模块
20250411094537664-image
  • 进入外观 > 自定义 > Header Builder > Sticky Header ,进入设置页面
20250411094602346-image

粘性页眉的可用设置

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

20250411094615674-image

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

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

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

Logo 与样式调整

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

20250411094641419-image

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

20250411094656827-image

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

20250411094706497-image

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

添加背景模糊效果(Background Blur)

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

操作步骤如下:

  • 在开启 Sticky Header 模块后,前往 外观 > 自定义 > Header > Sticky Header
20250411094825415-image
  • 点击 Primary Header 区块,进入“设计”选项卡
20250411094917419-image
  • 找到“Background Blur”选项并开启
20250411094945590-image
  • 建议设置背景颜色为半透明,以使模糊效果更加明显自然

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

外观增强设置

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

20250411094722869-image

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

20250411094730766-image

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

20250411094739642-image

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

20250411094746606-image

去除阴影样式(可选)

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

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

总结

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

相关文章



了解 宝藏号 的更多信息

订阅后即可通过电子邮件收到最新文章。

© 版权声明

相关文章

暂无评论

none
暂无评论...

了解 宝藏号 的更多信息

立即订阅以继续阅读并访问完整档案。

继续阅读