Layui中实现头部固定导航栏推荐使用CSS的position: sticky，只需为导航元素设置position: sticky; top: 0等样式，现代浏览器原生支持、无需JS；若需兼容IE等旧浏览器，则用layui.jquery监听scroll事件动态切换class。
在 Layui 中实现头部固定（吸顶）导航栏，核心是利用 CSS 的 position: sticky 或结合 JavaScript 监听滚动动态添加 class。Layui 本身不内置“吸顶”组件，但完全支持原生方案，且兼容性好、代码简洁。
使用 position: sticky（推荐，简洁高效）
这是最轻量、性能最好的方式，现代浏览器（Chrome 56+、Firefox 59+、Safari 13.1+、Edge 16+）均已支持。Layui 页面结构通常包含 <header> 或自定义导航容器，只需加一行 CSS：
- 确保导航栏父容器没有
overflow: hidden或transform等阻止 sticky 生效的样式 - 给导航外层元素（如
.layui-header或自定义类）设置：
.my-header {
position: -webkit-sticky; /* Safari 兼容 */
position: sticky;
top: 0;
z-index: 1000; /* 避免被其他内容遮挡 */
background-color: #fff; /* 吸顶后需显式设背景，避免透明穿透 */
box-shadow: 0 2px 4px rgba(0,0,0,.08); /* 可选：增强视觉层次 */
}✅ 无需 JS，无性能损耗，滚动即生效。
兼容旧版浏览器（如 IE / 低版本 Edge）用 JS 动态控制
若需支持 IE 或老旧 Edge，可用 Layui 的 layui.jquery 监听 scroll，动态切换 class：
- HTML 中为导航栏添加唯一 class，例如：
<div class="layui-header my-sticky-header">... - CSS 定义两种状态：
.my-sticky-header {
transition: all .2s ease;
}
.my-sticky-header.sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
background: #fff;
box-shadow: 0 2px 6px rgba(0,0,0,.1);
}- JS 初始化（建议放在
layui.use回调或 DOM 加载完成后）：
layui.use('jquery', function(){
var $ = layui.jquery;
var $header = $('.my-sticky-header');
var headerTop = $header.offset().top;
<p>$(window).on('scroll', function(){
var scrollTop = $(this).scrollTop();
if(scrollTop >= headerTop){
$header.addClass('sticky');
} else {
$header.removeClass('sticky');
}
});
});⚠️ 注意：需手动预留 body 上方空白（如给 <body> 添加 padding-top 或在导航下方插入等高占位元素），避免吸顶后内容上移遮挡。
配合 Layui 布局避免错位
Layui 的 layui-layout 结构中，若使用 layui-header，注意：
- 不要嵌套在
layui-container内部（否则宽度受限），应置于 container 外层 - 若页面有侧边栏（
layui-side），吸顶 header 默认会横跨全宽；如需与主体内容对齐，可将.layui-header放入.layui-container并用width: 100%+max-width: none覆盖 - 移动端适配：sticky 在 iOS Safari 某些版本下需添加
-webkit-overflow-scrolling: touch到滚动容器（如.layui-body）
小技巧：平滑过渡与阴影优化
提升用户体验的细节：
- 加
transition: all .25s cubic-bezier(.645,.045,.355,1)让 sticky 进出更自然 - 阴影用
box-shadow: 0 1px 6px rgba(0,0,0,.12)比默认更柔和 - 吸顶时可同步缩小 logo 或字体（通过
.sticky .logo控制），增强反馈感
不复杂但容易忽略。用 sticky 是首选，JS 方案作兜底即可。
