通过 CSS 的 position: fixed 属性可实现头部区域（如导航栏）随页面滚动始终保持在视口顶部，需配合 top: 0 和 width: 100% 确保定位准确与宽度自适应；WordPress 用户建议优先使用主题自定义CSS功能添加样式，并注意处理固定定位带来的布局偏移问题。
通过 css 的 `position: fixed` 属性可实现头部区域（如导航栏）随页面滚动始终保持在视口顶部，需配合 `top: 0` 和 `width: 100%` 确保定位准确与宽度自适应；wordpress 用户建议优先使用主题自定义css功能添加样式，并注意处理固定定位带来的布局偏移问题。
要让网页头部（Header）在用户向下滚动时始终“钉”在浏览器顶部，核心方案是使用 CSS 的 固定定位（position: fixed）。该方式使元素脱离文档流，相对于视口（viewport）进行定位，从而实现真正的“始终可见”。
✅ 基础实现代码（通用 HTML/CSS）
假设你的 HTML 中头部容器类名为 .site-header（实际请根据页面结构调整，可通过浏览器开发者工具（F12）右键检查元素确认）：
.site-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000; /* 确保在其他内容之上显示 */
background-color: #fff; /* 推荐添加背景色，避免滚动时内容透出 */
box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* 可选：增强视觉层次感 */
}
⚠️ 关键注意事项：
- position: fixed 会使元素脱离文档流，导致其下方内容“上移覆盖”原头部位置。因此，必须为 或紧邻头部之后的主内容区域添加等高 margin-top 或 padding-top（值 ≈ 头部高度），例如：
body { padding-top: 80px; /* 假设 .site-header 高度为 80px */ }
? WordPress 用户特别指南
如果你使用的是 WordPress（如示例站点 love-nature-02），推荐按以下步骤操作，无需修改主题文件，安全且可逆：
- 登录后台 → 外观 → 自定义 → 额外 CSS（部分主题显示为“定制器 → 附加 CSS”）；
- 粘贴上述 CSS 代码，将 .site-header 替换为你实际的头部选择器（常见有 .header, .site-header, #masthead, .navbar 等）；
- 点击「发布」生效。
? 如何快速确认正确选择器？
在前台页面按 F12 打开开发者工具 → 使用「选择元素」图标（✓）点击头部 → 查看右侧 Styles 面板中高亮显示的类名或 ID。
? 备选方案：插件辅助（零代码）
若 CSS 方案因主题复杂性失效（如 JS 动态控制 header、多层嵌套定位冲突），可启用成熟插件：
-
Sticky Menu or Anything on Scroll
支持可视化配置粘性元素、触发阈值、移动端开关及平滑过渡动画，兼容绝大多数主题。
✅ 最佳实践总结
- ✅ 始终设置 z-index（≥1000），防止被弹窗、广告等遮挡；
- ✅ 固定头部务必添加背景色与阴影，提升可读性与用户体验；
- ✅ 务必补偿主体内容的 padding-top，避免首屏内容被遮盖；
- ✅ 移动端需额外测试：添加 @media (max-width: 768px) 规则适配小屏高度；
- ❌ 避免对
直接写 position: fixed 而不处理后续布局——这是最常见的“内容消失”原因。
掌握这一技巧，不仅能实现专业级导航体验，也是响应式开发与用户体验优化的基础能力之一。
