layui表头吸顶默认不生效，因其表头与内容区dom分离且父容器overflow:auto导致position:sticky失效；需显式设置.box高度并确保header父级无transform等属性，或改用js监听滚动模拟。
layui table 表头吸顶为什么默认不生效
因为 layui.table 的渲染逻辑里，表头（.layui-table-header）和内容区（.layui-table-body）是分离的 DOM 结构，滚动靠的是 .layui-table-box 内部的横向/纵向滚动容器，但默认没启用 sticky 定位或 JS 监听滚动。原生 CSS position: sticky 在这种嵌套 overflow 场景下极易失效。
常见错误现象：
– 加了 top: 0 和 position: sticky 没反应
– 表头随页面滚动一起消失，而不是固定在容器顶部
– 在 Firefox 下完全不触发 sticky
根本原因：父容器（如 .layui-table-box）设置了 overflow: auto，而 sticky 元素的最近滚动祖先不能是它自己——必须确保 sticky 的直接父级有明确高度且不设 overflow，或者换 JS 方案。
用 CSS + height 控制实现最简吸顶
适用于固定高度表格、内容区域可预估高度的场景，兼容性好（Chrome/Firefox/Edge 均支持），无需监听滚动。
关键点：
– 必须给 .layui-table-box 显式设置 height（不能是 auto 或 max-height）
– 表头容器 .layui-table-header 需要设 position: sticky 并指定 top: 0
– 确保 .layui-table-header 的父级（即 .layui-table-box）没有 transform、perspective 等会创建新层叠上下文的属性
实操建议：
– 在 table 初始化后，用 JS 动态计算并设置 .layui-table-box 高度，例如：
document.querySelector('.layui-table-box').style.height = '400px';
– 在 CSS 中加：
.layui-table-header { position: sticky !important; top: 0 !important; z-index: 10; }
– 如果用了
skin: 'line' 或自定义样式，检查是否覆盖了 .layui-table-header 的定位属性
用 JS 监听滚动模拟吸顶（兼容旧版 & 动态高度）
当表格高度不确定、需响应式适配，或项目用了老版本 Layui（
核心思路：监听 .layui-table-box 的 scroll 事件，在滚动时动态切换 .layui-table-header 的 position 和 top 值，同时用 transform: translateY() 避免重排。
常见坑：
– 直接改 top 会触发 layout，性能差；应优先用 transform
– 滚动事件未节流，快速拖拽时卡顿
– 没判断是否已吸顶，重复添加 class 导致样式冲突
实操建议：
– 给表头加一个临时 class：
.table-header-sticky { position: absolute; left: 0; right: 0; transform: translateY(0); }
– 监听 scroll：
const box = document.querySelector('.layui-table-box');<br>let ticking = false;<br>box.addEventListener('scroll', () => {<br> if (!ticking) {<br> requestAnimationFrame(() => {<br> const top = box.scrollTop;<br> const header = document.querySelector('.layui-table-header');<br> header.classList.toggle('table-header-sticky', top > 0);<br> header.style.transform = `translateY(${Math.max(0, top)}px)`;<br> ticking = false;<br> });<br> ticking = true;<br> }<br>});
为什么 layui 2.8+ 的 fixed 属性不管用
很多人试过在 cols 里写 fixed: 'left' 或 fixed: true，但这只是列冻结（column freeze），不是表头吸顶（header sticky）。Layui 的 fixed 和 height 参数组合才能触发内部滚动容器，但依然不等于表头固定。
真正起作用的配置只有：
– height：必须为数字（如 400），不能是字符串 '400px'
– limit：影响分页条位置，间接影响可视区域高度
– skin：某些 skin（如 'nob）会移除边框，但不影响吸顶逻辑
注意：
– height 设太小会导致内容被截断，设太大则失去滚动意义
– 若用了 page: true，吸顶只对当前页生效；翻页后需重新绑定滚动监听（如果用 JS 方案）
– 表格初始化后，.layui-table-box 才生成，所有 DOM 操作必须等 done 回调里执行
吸顶这事，本质是控制「谁滚动」和「谁定位」之间的关系。Layui 把结构拆太散，反而让最简单的 sticky 变成需要查源码才能绕开的细节。别信“加个属性就行”，先看 DOM 结构，再决定是压 CSS 还是扛 JS。
