WordPress如何固定页眉，详细教程与技巧

一、什么是固定页眉？

固定页眉（Sticky Header）是指当用户滚动网页时，页眉部分始终保持在浏览器窗口的顶部，不随页面滚动而消失。这种设计能提升用户体验，方便访客随时访问导航菜单、搜索框或重要按钮。

二、实现固定页眉的3种方法

方法1：使用WordPress主题自带功能

许多现代WordPress主题（如Astra、OceanWP、GeneratePress）已内置固定页眉选项。操作步骤如下：

1. 进入 外观 > 自定义
2. 找到 页眉（Header） 设置
3. 启用 固定页眉 或 Sticky Header 选项
4. 根据需要调整滚动时的样式（如透明背景、阴影效果等）

方法2：通过CSS代码实现

若主题不支持固定页眉，可添加自定义CSS：

1. 进入 外观 > 自定义 > 附加CSS
2. 输入以下代码（根据实际类名调整）：

.site-header {
position: sticky;
top: 0;
z-index: 999;
background: #fff; /* 背景色可修改 */
box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 可选阴影效果 */
}

方法3：使用插件（适合新手）

推荐插件：

• Sticky Menu (or Anything!) on Scroll
• Qode Header Builder 安装后通过可视化界面设置固定页眉，无需编码。

三、常见问题与优化建议

1. 固定页眉遮挡内容？

在CSS中添加 padding-top 到页面主体：

body {
padding-top: 100px; /* 数值需匹配页眉高度 */
}

2. 滚动时改变页眉样式？

使用以下CSS实现滚动特效：

.site-header.scrolled {
background: rgba(255,255,255,0.9);
height: 60px; /* 滚动后高度 */
transition: all 0.3s;
}

3. 移动端适配

通过媒体查询调整小屏幕样式：

@media (max-width: 768px) {
.site-header {
position: static; /* 移动端取消固定 */
}
}

四、总结

固定页眉是提升网站易用性的有效设计，无论是通过主题设置、CSS代码还是插件，都能轻松实现。建议优先测试主题自带功能，再根据需求选择进阶方案。完成后务必在不同设备上测试效果，确保用户体验一致流畅。