Layui表头加position: sticky无效，因其表头与内容区DOM分离且父容器.layui-table-box设overflow:auto，导致sticky最近可滚动祖先不合法；必须显式设.box高度并禁用transform等属性，或改用JS监听滚动模拟。
直接给 .layui-table-header 加 position: sticky 没用——Layui 表格的 DOM 结构和滚动容器设计天然阻断 sticky 行为。
为什么 position: sticky 在 Layui 表头里基本失效
Layui 把表头（.layui-table-header）和内容区（.layui-table-body）拆成两个独立容器，都包在 .layui-table-box 里；而这个父容器默认设置了 overflow: auto。浏览器要求 sticky 元素的**最近可滚动祖先不能是它自己的父级**，一旦父级有 overflow，sticky 就退化为 static。
-
.layui-table-box没设固定高度，height: auto或max-height缺失 → sticky 无滚动上下文 -
.layui-table-header的父级（即.layui-table-box）若带transform、perspective或filter→ 创建新层叠上下文，sticky 彻底失效 - Firefox 下对嵌套
overflow+sticky支持更弱，常完全不触发 - 即使加了
top: 0和!important，DOM 结构隔离也导致样式无法穿透到真实渲染位置
最简可行：CSS + 显式高度控制
适用于表格高度可控、列数固定、不频繁 resize 的场景。不用 JS 监听，兼容性好（Chrome/Firefox/Edge 均可）。
- 必须用 JS 在
done回调里设置.layui-table-box的height，不能靠 CSSmax-height：document.querySelector('.layui-table-box').style.height = '400px'; - CSS 中强制定位表头：
.layui-table-header { position: sticky !important; top: 0 !important; z-index: 10 !important; background: #fff; } - 检查是否引入了自定义皮肤（如
skin: 'line'），它们可能重置了.layui-table-header的position，需针对性覆盖 - 确保没有全局样式给
.layui-table-box加transform: translateZ(0)这类隐形“杀手”
稳定兜底：JS 滚动监听 + class 切换
当表格高度不可预估、要支持响应式或兼容 IE 时，这是唯一可靠方案。注意别直接操作 position: fixed 导致内容上蹿。
- 在
done回调中获取表头距文档顶部距离：const headerTop = $('.layui-table-header').offset().top; - 监听
window.scroll，用requestAnimationFrame节流判断：if ($(window).scrollTop() >= headerTop) { $('.layui-table-header').addClass('is-sticky'); } else { $('.layui-table-header').removeClass('is-sticky'); } - CSS 定义：
.is-sticky { position: fixed !important; top: 0 !important; width: 100% !important; z-index: 999; } - 关键补偿：给
.layui-table-body加margin-top，值等于表头高度，否则内容会向上跳动
容易被忽略的细节
真正卡住人的往往不是代码怎么写，而是这些隐性约束：
-
.layui-table-header实际是浮动层，它的宽度由 JS 动态计算，如果表格容器宽度变化（比如侧边栏展开），必须手动触发table.resize('yourTableId')同步宽度 - 用了
fixed: 'left'或fixed: 'right'列时，.layui-table-header会被拆成三块（主区 + 左固定 + 右固定），只给主区加 sticky 会导致左右表头消失——得同时处理.layui-table-fixed和.layui-table-fixed-right内的.layui-table-header - 移动端 touch 滚动下 sticky 有延迟，加
will-change: transform到th可缓解，但别加在.layui-table-header上，否则内存泄漏风险上升
