讲师中心微信公众号

首页

文章

后端开发 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

|

796人浏览过

|

来源于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 旧版本中偶有渲染异常，建议添加：

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

魔珐星云
无需昂贵GPU，一键解锁超写实/二次元等多风格3D数字人，跨端适配千万级并发的具身智能平台。

下载
```
@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 即可稳健实现。

相关文章

如何使用 Flexbox 将 SVG 图标精准居中于左侧矩形容器内

如何使用 CSS 属性选择器精准匹配以 __tienda 结尾的 div 元素

Tailwind CSS 中自定义图片尺寸的正确写法

响应式图像缩放：让图片随屏幕尺寸自动等比缩放并保持相对位置

如何让网页中的图片随屏幕缩放自动等比缩放并保持相对位置？

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语句语法规则教程【教程】

作者最新文章

Chart.js 散点图中实现数据点颜色按 Y 值动态着色

2026-02-06 12:55

业界分析任天堂新发布会传达从复古到3A游戏全揽于旗下野心

2026-02-06 12:57

国产操作系统的崛起：盘点2024年值得关注的国产操作系统

2026-02-06 12:57

如何通过对比新旧数组识别被拖拽移动的元素

2026-02-06 13:16

《最终幻想7》重制版导演：今年将更积极公布游戏开发情报

2026-02-06 14:31

以阵破局，妙算神机！《枪火重生》第七赛季“妙阵天工”正式上线，本体迎来史低特惠！

2026-02-06 14:33

又吃上大份了育碧官方《荣耀战魂》"苦命鸳鸯"整活视频

2026-02-06 14:41

国产化麒麟信安操作系统激活方法

2026-02-06 14:51

恐怖打字游戏《Dyping Escape：生死敲定》2月6日Steam发布免费体验

2026-02-06 15:06

《噬血代码2》登顶Fami通销量榜！超越《马里奥赛车：世界》

2026-02-06 15:25

热门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的相关内容，可以阅读本专题下面的文章。

536

2024.01.03

python中class的含义

python中class的含义

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

18

2025.12.06

CSS position定位有几种方式

CSS position定位有几种方式

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

82

2023.11.23

margin在css中是啥意思

margin在css中是啥意思

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

444

2023.12.18

css中的padding属性作用

css中的padding属性作用

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

138

2023.12.07

Golang处理数据库错误教程合集

Golang处理数据库错误教程合集

本专题整合了Golang数据库错误处理方法、技巧、管理策略相关内容，阅读专题下面的文章了解更多详细内容。

37

2026.02.06

java多线程方法汇总

java多线程方法汇总

本专题整合了java多线程面试题、实现函数、执行并发相关内容，阅读专题下面的文章了解更多详细内容。

17

2026.02.06

1688阿里巴巴货源平台入口与批发采购指南

1688阿里巴巴货源平台入口与批发采购指南

本专题整理了1688阿里巴巴批发进货平台的最新入口地址与在线采购指南，帮助用户快速找到官方网站入口，了解如何进行批发采购、货源选择以及厂家直销等功能，提升采购效率与平台使用体验。

282

2026.02.06

快手网页版入口与电脑端使用指南快手官方短视频观看入口

快手网页版入口与电脑端使用指南快手官方短视频观看入口

本专题汇总了快手网页版的最新入口地址和电脑版使用方法，详细提供快手官网直接访问链接、网页端操作教程，以及如何无需下载安装直接观看短视频的方式，帮助用户轻松浏览和观看快手短视频内容。

149

2026.02.06

热门下载

更多

网站特效

/

网站源码

/

网站素材

/

前端模板

相关下载

更多

php商城系统

淘源码商城PHP淘宝查信誉

PHP房产程序[BBWPS]

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

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

Difeye-敏捷的轻量级PHP框架

大泉州汽车网PHP整站程序

精品课程

更多

相关推荐

/

热门推荐

/

最新课程

Sass 教程

Sass 教程

共14课时 | 0.8万人学习

Bootstrap 5教程

Bootstrap 5教程

共46课时 | 3.2万人学习

CSS教程

CSS教程

共754课时 | 28.9万人学习

最新文章

更多

html5怎么搭建简单网页_零基础搭html5页面实操方法【方法】

如何在 React 中安全解析 HTML 并保留自定义组件的大小写敏感性

HTML5视频新版支持anchorpos_版本差异用法说明【说明】

HTML5动画怎么做实现滚动视差联动_监听滚动位置触发解答【解答】

如何从欧洲议会官网批量抓取议员信息并结构化为表格

如何让 iframe 自适应内容高度（跨域安全方案）

PSD转HTML5图片路径错咋找_相对路径设【解答】

HTML5转APP打开慢怎么办_常见卡顿故障排查技巧【技巧】

html样式代码怎么用_手机改样式代码要重编译吗【解答】

HTML5表单验证怎么禁用_外包项目免校验需求介绍【介绍】

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

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

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

PHP学习

技术支持

返回顶部