通过为 vuexy 水平导航栏添加 `position: fixed` 样式并合理设置 `top`、`z-index` 和 `margin-top`，可使其始终悬浮于页面顶部，不随滚动消失。

Vuexy 的 HTML 模板默认采用常规文档流布局，其水平菜单（通常位于

或类似结构中）默认是静态定位（position: static），滚动时会随之移出视口。要实现“固定在顶部”效果，需将其 CSS 定位方式改为 fixed，并配合关键样式确保视觉正确性和内容不被遮挡。

✅ 核心步骤如下：

1. 定位菜单容器：找到 Vuexy 水平菜单的最外层 DOM 元素（常见类名如 .header-navbar、.horizontal-menu 或 .navbar-header）。可通过浏览器开发者工具（F12）右键检查确认。

2. 添加固定定位样式：在自定义 CSS 文件（如 assets/css/custom.css）或

   

   CSS

   CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

   下载

   立即学习“前端免费学习笔记（深入）”；

/* 示例：固定 Vuexy 水平菜单 */
.header-navbar,
.horizontal-menu {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1030; /* 高于内容层（如 .content-area），避免被遮挡 */
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 可选：增强视觉层次 */
}

⚠️ 注意：!important 用于覆盖 Vuexy 默认的 position: relative 或 static；z-index: 1030 是 Bootstrap/Vuexy 常用层级（如 Modal 为 1050），确保菜单始终在上层。

3. 为主要内容预留空间：由于 position: fixed 使菜单脱离文档流，下方内容会向上“顶替”原位置，导致首屏内容被遮盖。需为 .content-area（或主内容容器）添加等高 margin-top：

.content-area {
  margin-top: 80px; /* 值 ≈ 菜单实际高度（含 padding/border），建议用 JS 动态获取或设为变量 */
}

? 进阶建议（提升健壮性）：

• 使用 CSS 自定义属性统一管理高度：

  :root {
    --menu-height: 80px;
  }
  .header-navbar { height: var(--menu-height); }
  .content-area { margin-top: var(--menu-height); }

• 若启用移动端折叠菜单或存在多状态（如缩小侧边栏），建议结合 JavaScript 监听 resize 或 Vuex 状态，动态调整 margin-top。

✅ 最终效果：菜单始终吸附顶部，滚动时保持可见，主内容区域自然下移，无重叠、无跳动——符合专业 SPA 的交互预期。