解决Layui表格需表头固定悬浮的问题

一、描述

当表格内容过多：表头离开页面可视范围时，把表头固定悬浮在上面，如下图所示：
[ 修改前 ]
[ 修改后 ]

二、解决

思路：问题的关键是如何知道表头是否超出可视范围，首先我们需要知道表头到文档顶部的距离，这个距离是不会变的（除非操控DOM）,然后监听滚动条滚动的距离。如果前者减去后者小于0，则表示离开了可视范围。

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

三、需知

*Table下面的参数height，请务必了解

• Layui-数据表格-基础参数一览表
• Layui-数据表格-基础参数一览表-参数height

【官方文档 table下的height参数解释如下】

可选值	说明	示例
不填写	默认情况。高度随数据列表而适应，表格容器不会出现纵向滚动条	-
固定值	设定一个数字，用于定义容器高度，当容器中的内容超出了该高度时，会自动出现纵向滚动条	height: 315
full-差值	高度将始终铺满，无论浏览器尺寸如何。 这是一个特定的语法格式，其中 full 是固定的，而 差值 则是一个数值，这需要你来预估， 比如：表格容器距离浏览器顶部和底部的距离“和” PS：该功能为 layui 2.1.0 版本中新增	height: ‘full-20’

• 示例

//“方法级渲染”配置方式
table.render({ //其它参数在此省略
  height: 315 //固定值
}); 
table.render({ //其它参数在此省略
  height: 'full-20' //高度最大化减去差值
}); 
 
等价于（“自动化渲染”配置方式）
<table class="layui-table" lay-data="{height:315}" lay-filter="test"> …… </table>
<table class="layui-table" lay-data="{height:'full-20'}" lay-filter="test"> …… </table>