随笔 - 144  文章 - 0  评论 - 2  阅读 - 92190

layui解决表头固定

.table-header-fixed {
top: 0;
position: fixed;
z-index: 9999999;
}
let headerTop = $('.layui-table-header').offset().top; //获取表格头到文档顶部的距离
$(window).scroll(function () {
if ((headerTop - $(window).scrollTop()) < 0) { //超过了
$('.layui-table-header').addClass('table-header-fixed'); //添加样式,固定住表头
} else { //没超过
$('.layui-table-header').removeClass('table-header-fixed'); //移除样式
}
});
//滚动body,header跟随滚动
$('.layui-table-body').on('scroll', function(e) {
var leftPx = $(e.target).scrollLeft(); //获取表格body,滚动条距离左边的长度
var left = 'translateX(-' + leftPx + 'px)';
$('.layui-table-header .layui-table').css('transform', left); //设置表格header的内容反向(-)移动
});
posted on   IT-QI  阅读(2678)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 提示词工程——AI应用必不可少的技术
· 地球OL攻略 —— 某应届生求职总结
· 字符编码:从基础到乱码解决
· SpringCloud带你走进微服务的世界
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

点击右上角即可分享
微信分享提示