//表头固定 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'); //移除样式 } });
滚动条横向拖动时,表头字段跟着移动 $('.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的内容反向(-)移动 });
将以上两段代码放在table的done事件内
最后,记得增加上该段样式
.table-header-fixed { top: 0; position: fixed; z-index: 999; }
微信扫码关注 FK 公众号