先在Layui表格渲染完成的回调函数里写:


done:function(res, curr, count) {
    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'); //移除样式
       }
    });
}

 


然后再添加样式

.table-header-fixed {
    top: 0;
    position: fixed;
    z-index: 999;
}


如果表格的列足够多,表格最下方就会有一个横向滚动条,我们拖动这个滚动条,表格头由于固定了并不会跟着移动,为了解决这个问题,加上以下代码:


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