首页 > 其他分享 >layui解决表头固定

layui解决表头固定

时间:2022-08-17 15:46:24浏览次数:73  
标签:body layui 表头 header 固定 table fixed

.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的内容反向(-)移动
});

标签:body,layui,表头,header,固定,table,fixed
From: https://www.cnblogs.com/qxqbk/p/16595452.html

相关文章