如何让 Vuexy 水平菜单（HTML 模板）固定在页面顶部

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

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

✅ 核心步骤如下：

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

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

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

/* 示例：固定 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 的交互预期。