在网站设计中，固定页眉（Sticky Header）是一种常见的功能，它可以让导航栏始终显示在页面顶部，即使用户滚动页面也不会消失。这种设计不仅提升了用户体验，还能方便访问者随时跳转到其他页面。本文将详细介绍如何在WordPress中实现固定页眉的功能。
方法一：使用WordPress主题自带功能
许多现代WordPress主题（如Astra、OceanWP、GeneratePress等）内置了固定页眉选项。以下是操作步骤：
- 登录WordPress后台，进入“外观” > “自定义”。
- 找到“页眉”或“Header”设置选项（不同主题名称可能不同）。
- 查找“固定页眉”（Sticky Header）或“滚动时固定”选项，勾选启用。
- 保存设置并预览效果。
如果你的主题支持，还可以调整固定页眉的背景颜色、透明度或动画效果。
方法二：通过插件实现
如果主题不支持固定页眉，可以通过插件轻松实现。推荐以下插件：
- Sticky Menu (or Anything!) on Scroll：简单易用，支持固定导航栏或其他元素。
- Elementor Pro（如果使用Elementor页面编辑器）：内置“固定页眉”功能。
操作步骤：
- 安装并激活插件（以“Sticky Menu”为例）。
- 进入插件设置，选择需要固定的元素（通常是导航栏的CSS类或ID）。
- 设置滚动偏移量、动画效果等参数。
- 保存后查看效果。
方法三：手动添加CSS代码
如果你熟悉代码，可以通过自定义CSS实现固定页眉：
- 进入WordPress后台，打开“外观” > “自定义” > “附加CSS”。
- 输入以下代码（假设你的页眉CSS类为
.site-header）：
.site-header {
position: sticky;
top: 0;
z-index: 999;
width: 100%;
}
- 保存后刷新页面即可生效。
注意事项
- 移动端适配：固定页眉可能会占用屏幕空间，需确保在移动设备上显示正常。
- 性能优化：过多的CSS或插件可能影响加载速度，建议优先使用主题自带功能。
- 兼容性测试：在不同浏览器（Chrome、Firefox、Safari等）中检查效果。
通过以上方法，你可以轻松为WordPress网站添加固定页眉功能，提升用户体验和导航便捷性！
