在网站设计中，页眉（Header）通常是展示品牌Logo、导航菜单等重要信息的关键区域。为了提升用户体验，许多网站会让页眉在页面滚动时保持固定，以便用户随时访问导航功能。本文将介绍如何在WordPress中实现页眉跟随滚动的效果。
方法一：使用CSS固定定位
最简单的实现方式是通过CSS的position: fixed属性，让页眉始终固定在浏览器窗口的顶部。
- 进入WordPress后台，依次点击 外观 > 自定义 > 额外CSS。
- 在CSS编辑框中输入以下代码：
.site-header {
position: fixed;
top: 0;
width: 100%;
z-index: 999;
background: #ffffff; /* 可根据需要调整背景色 */
}
- 保存更改后，页眉就会在滚动时保持固定。
注意事项：
- 如果页眉原本有透明效果，固定后可能会遮挡内容，建议调整
padding-top或margin-top确保正文内容不被覆盖。
方法二：使用插件实现
如果不想手动修改代码，可以使用插件如 Sticky Menu (or Anything!) on Scroll：
- 安装并激活插件（在 插件 > 安装插件 中搜索并安装）。
- 进入 设置 > Sticky Menu，选择需要固定的元素（如
.site-header）。 - 调整偏移量、动画效果等参数，保存后即可生效。
方法三：通过主题自带功能
部分WordPress主题（如Astra、OceanWP）内置了“粘性页眉”选项：
- 进入 外观 > 自定义 > 页眉设置。
- 查找 Sticky Header 或 固定页眉 选项并启用。
- 根据需要调整样式，如滚动时的透明度变化或阴影效果。
优化建议
- 兼容性测试：确保固定页眉在移动端显示正常，避免遮挡内容。
- 性能优化：如果使用JS实现，尽量选择轻量级代码，避免影响页面加载速度。
- 视觉协调：固定页眉的背景色和阴影应与页面整体风格一致。
通过以上方法，你可以轻松为WordPress网站添加页眉跟随滚动效果，提升导航便捷性和用户体验。
