Blocksy 教程：使用 MetaBox 创建并美化自定义文章类型（CPT）
lyc054211在使用 Astra 主题搭建 WordPress 网站时，很多人会希望网站顶部的导航栏能够在滚动页面时保持固定，也就是实现所谓的 “粘性页眉”（Sticky Header）。但这一功能默认只在 Astra Pro 版本中提供。
如果你不打算为 Astra 升级付费，那么本文将教你一个免费实现该效果的方法 —— 通过简单的 CSS 代码即可轻松实现 Sticky Header，无需插件与 Astra Pro！
什么是粘性页眉？
粘性页眉（Sticky Header） 是指：当用户向下滚动网页时，网站顶部的导航栏仍然保持固定，始终显示在浏览器顶部，方便用户随时点击导航菜单。
实现思路：用自定义 CSS 实现粘性页眉效果
步骤一：登录你的 WordPress 后台
前往WordPress 网站后台，点击左侧菜单栏中的 外观 > 自定义。
步骤二：打开「额外 CSS」面板
在「自定义」界面中，点击左侧菜单中的 额外 CSS（Additional CSS）。
步骤三：粘贴以下 CSS 代码
将以下代码复制并粘贴到 CSS 编辑区域中：
.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;
}粘贴后，立刻看到顶部导航栏已经变成可滚动固定了！
可选参数修改说明
可以根据需要对以下参数进行微调：
top: 0;—— 控制距离页面顶部的距离（可以改为top: 50px;）z-index: 999;—— 确保它覆盖其他内容（不要改得太小）background-color—— 修改粘性状态下的背景颜色（如#000000）transition—— 设置粘性时的动画效果
如果想增加内边距 padding，可复制下面代码：
.main-header-bar {
padding-top: 20px;
padding-bottom: 20px;
}移动端自适应优化（可选）
这段代码让粘性导航在手机端也能保持良好的展示效果。
@media (max-width: 768px) {
.main-header-bar {
padding-top: 15px;
padding-bottom: 15px;
}
}不懂 CSS？可以让 ChatGPT 来帮你！
如果你对 CSS 不熟悉，还可以复制上述代码片段，让 ChatGPT 或 AI 工具根据你的需求（比如改变颜色、间距、阴影）帮你快速修改，非常适合小白用户。
总结
即使没有升级到 Astra Pro，也可以轻松通过自定义 CSS 代码实现 WordPress 网站的粘性页眉效果。本文的教程只需添加几行代码，不用插件也能让网站实现粘性导航的功能，提升网站体验和实用性。如果想了解更多WordPress相关的教程和资讯，请关注光子波动网，拥有最全的WordPress教程和最活跃的WordPress交流社区。
了解 宝藏号 的更多信息订阅后即可通过电子邮件收到最新文章。 © 版权声明 文章版权归作者所有，未经允许请勿转载。 相关文章
lyc054211
WordPress 按钮短代码使用指南：插件、自定义代码与设计优化全解析lyc054211
在 Blocksy 主题中管理和优化侧边栏lyc054211
如何使用WordPress编辑器中的链接选项提高SEOlyc054211 暂无评论... |
|---|