如何实现 Vuexy 水平菜单在网页顶部固定显示？

本文共计779个文字，预计阅读时间需要4分钟。

原文详解如何通过+a+style=color:+指定文本颜色，不涉及图片解释，不使用语气词，不超过100字，直接输出结果。

Vuexy 的 HTML 版本（非 Vue 单文件组件）默认采用常规文档流布局，其顶部水平菜单（通常为 <nav class="header-navbar"> 或 <div class="horizontal-menu">）默认是静态定位（position: static），随页面滚动而消失。要实现“吸顶”效果，核心是将其 CSS 定位方式改为 fixed，并合理处理布局偏移。

✅ 推荐实现步骤：

1. 定位目标元素
   在 Vuexy HTML 模板中，水平菜单通常包裹在类似以下结构中：

   <nav class="header-navbar navbar-horizontal navbar-shadow"> <!-- 导航内容 --> </nav>

   或（旧版/定制版）：

   <div class="horizontal-menu-wrapper"> <div class="horizontal-menu"> <!-- 菜单项 --> </div> </div>

2. 添加固定定位样式
   为该容器添加 position: fixed; top: 0; width: 100%; z-index: 1030;（z-index 需高于内容层，Vuexy 默认 .content 的 z-index 为 1，建议设为 ≥1030）。