讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 AI 提示词

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

0

0

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

霞舞

发布时间：2026-02-08 11:13:21

|

816人浏览过

|

来源于php中文网

原创

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

本文详解如何通过 css `position: fixed` 将 vuexy html 模板中的水平导航栏（header/nav）固定于浏览器顶部，确保滚动时始终可见，并提供可直接复用的样式代码与关键注意事项。

Vuexy 的 HTML 版本（非 Vue 单文件组件）默认采用常规文档流布局，其顶部水平菜单（通常为

或

）默认是静态定位（position: static），随页面滚动而消失。要实现“吸顶”效果，核心是将其 CSS 定位方式改为 fixed，并合理处理布局偏移。

✅ 推荐实现步骤：

定位目标元素
在 Vuexy HTML 模板中，水平菜单通常包裹在类似以下结构中：
```
  
```
或（旧版/定制版）：
```
  
    
  
```

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

）添加 margin-top 或 padding-top，避免被固定菜单遮挡：

/* 固定水平菜单 */
.header-navbar.navbar-horizontal,
.horizontal-menu-wrapper .horizontal-menu {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1030;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 推开主内容，防止被遮盖（关键！）*/
.app-content {
  margin-top: 76px; /* 根据实际菜单高度调整，Vuexy 默认约为 76px */
}

响应式兼容性检查
position: fixed 在移动端 Safari 旧版本中偶有渲染异常，建议添加：

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

Interior AI
AI室内设计，上传室内照片自动帮你生成多种风格的室内设计图

下载
```
@supports (position: sticky) {
  /* 可选：对支持 sticky 的设备降级使用更稳定的 sticky */
  .header-navbar.navbar-horizontal {
    position: sticky;
    top: 0;
  }
}
```
但注意：sticky 不适用于所有嵌套场景，生产环境仍推荐 fixed + 显式 z-index + 内容避让。

⚠️ 重要注意事项：

✅ 务必设置 z-index，否则菜单可能被轮播图、弹窗等覆盖；
✅ 必须为 .app-content 或其父容器添加 margin-top（值 ≈ 固定菜单高度），否则首屏内容会被遮挡；
❌ 避免对 .horizontal-menu-wrapper 整体设 fixed（若它含侧边栏触发器等浮动元素），应精准作用于菜单主体；
? 使用浏览器开发者工具（F12）实时检查 .header-navbar 实际高度，并据此调整 margin-top 值（常见范围：72px–84px）。

完成上述修改后，刷新页面，水平菜单将始终悬浮于视口顶部，滚动时保持可见——无需 JavaScript，纯 CSS 即可稳健实现。

相关文章

HTML5怎么标注重点能嵌套使用吗_nested标记对可读性影响操作【详解】

html语句嵌套怎么在手机端生效_响应式嵌套要点【操作】

如何在html5页面中动态特效代码

游戏角色怎么移动_HTML5引擎控制角色移动的代码实现【详解】

html5怎么设置边框实线_不同html5版本实线边框差异【说明】

HTML速学教程(入门课程)

HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载

相关标签:

css vue javascript java html 浏览器 app 工具 safari 静态定位固定定位 safari Static class position margin padding

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：html5改格式后脚本报错_执行环境匹配调整法【解答】下一篇：html语句的应用_入门必知html语句语法规则教程【教程】

作者最新文章

如何从CSV列字符串中安全提取日期并过滤掉最大日期

2026-02-09 14:23

Go 中 switch 语句天然支持空 case 实现“无操作”（no-op）

2026-02-09 14:46

如何在 PHP 循环中为每个按钮绑定独立的点击事件并显示对应隐藏字段的值

2026-02-09 14:46

如何在 Docker 中正确构建包含本地 Go 包的项目

2026-02-09 14:58

如何在Java应用中正确加载包含嵌套依赖的JAR包

2026-02-09 14:59

如何为每个文件输入字段独立分组上传的文件数据

2026-02-09 15:07

如何基于隐藏的“幽灵内容”控制 div 的尺寸

2026-02-09 15:09

PHP 中安全地向 MySQL JSON 字段追加数据的完整教程

2026-02-09 15:09

API 版本控制的最佳实践：Go 服务中清晰、高效且可维护的版本路由方案

2026-02-09 15:10

SVG 元素透明度过渡抖动与跳变问题的解决方案

2026-02-09 15:33

热门AI工具

更多

DeepSeek

DeepSeek

幻方量化公司旗下的开源大模型平台

AI 编程开发 AI 聊天问答

豆包大模型

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI 编程开发 AI大模型

通义千问

通义千问

阿里巴巴推出的全能AI助手

AI 编程开发 Agent智能体

腾讯元宝

腾讯元宝

腾讯混元平台推出的AI助手

文档处理 AI 聊天问答

文心一言

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI 编程开发 AI 文本写作

讯飞写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

AI 文本写作中文写作

即梦AI

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

ChatGPT

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI 编程开发 AI 文本写作

智谱清言 - 免费全能的AI助手

智谱清言 - 免费全能的AI助手

智谱清言 - 免费全能的AI助手

AI 编程开发 Agent智能体

相关专题

更多

class在c语言中的意思

class在c语言中的意思

在C语言中，"class" 是一个关键字，用于定义一个类。想了解更多class的相关内容，可以阅读本专题下面的文章。

578

2024.01.03

python中class的含义

python中class的含义

本专题整合了python中class的相关内容，阅读专题下面的文章了解更多详细内容。

19

2025.12.06

CSS position定位有几种方式

CSS position定位有几种方式

有4种，分别是静态定位、相对定位、绝对定位和固定定位。更多关于CSS position定位有几种方式的内容，可以访问下面的文章。

83

2023.11.23

margin在css中是啥意思

margin在css中是啥意思

在CSS中，margin是一个用于设置元素外边距的属性。想了解更多margin的相关内容，可以阅读本专题下面的文章。

448

2023.12.18

css中的padding属性作用

css中的padding属性作用

在CSS中，padding属性用于设置元素的内边距。想了解更多padding的相关内容，可以阅读本专题下面的文章。

138

2023.12.07

2026春节习俗大全

2026春节习俗大全

本专题整合了2026春节习俗大全，阅读专题下面的文章了解更多详细内容。

68

2026.02.11

Yandex网页版官方入口使用指南_国际版与俄罗斯版访问方法解析

Yandex网页版官方入口使用指南_国际版与俄罗斯版访问方法解析

本专题全面整理了Yandex搜索引擎的官方入口信息，涵盖国际版与俄罗斯版官网访问方式、网页版直达入口及免登录使用说明，帮助用户快速、安全地进入Yandex官网，高效使用其搜索与相关服务。

200

2026.02.11

虫虫漫画网页版入口与免费阅读指南_正版漫画全集在线查看方法

虫虫漫画网页版入口与免费阅读指南_正版漫画全集在线查看方法

本专题系统整理了虫虫漫画官网及网页版最新入口，涵盖免登录观看、正版漫画全集在线阅读方式，并汇总稳定可用的访问渠道，帮助用户快速找到虫虫漫画官方页面，轻松在线阅读各类热门漫画内容。

40

2026.02.11

Docker容器化部署与DevOps实践

Docker容器化部署与DevOps实践

本专题面向后端与运维开发者，系统讲解 Docker 容器化技术在实际项目中的应用。内容涵盖 Docker 镜像构建、容器运行机制、Docker Compose 多服务编排，以及在 DevOps 流程中的持续集成与持续部署实践。通过真实场景演示，帮助开发者实现应用的快速部署、环境一致性与运维自动化。

4

2026.02.11

热门下载

更多

网站特效

/

网站源码

/

网站素材

/

前端模板

相关下载

更多

php商城系统

淘源码商城PHP淘宝查信誉

PHP房产程序[BBWPS]

PHP简约自动发卡平台个人版

ERMEB域名PHP离线网络授权系统

Difeye-敏捷的轻量级PHP框架

大泉州汽车网PHP整站程序

精品课程

更多

相关推荐

/

热门推荐

/

最新课程

Sass 教程

Sass 教程

共14课时 | 0.9万人学习

Bootstrap 5教程

Bootstrap 5教程

共46课时 | 3.3万人学习

CSS教程

CSS教程

共754课时 | 30.4万人学习

最新文章

更多

CSS 中重叠元素背景色混合问题的解决方案

如何基于单选按钮选择动态执行对应游戏逻辑函数

如何基于单选按钮选择动态执行不同游戏逻辑？

如何正确基于单选按钮选择执行对应游戏逻辑函数

如何用 CSS Grid 实现上下两个 div 的等高自适应布局

SvelteKit 中彻底消除 FOUC（闪屏）的完整解决方案

如何将计算器结果保存至指定 HTML 元素（如 <span>）

SvelteKit 中彻底消除 FOUC（闪屏）的专业实践方案

如何把html转换成另一个页面

html中如何将两个div放入一行

关于我们免责申明举报中心意见反馈讲师合作广告合作最新更新: php中文网：公益在线php培训，帮助PHP学习者快速成长！; 关注服务号技术交流群

PHP中文网订阅号: 每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

PHP学习

技术支持

返回顶部