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

当表格过长，表头离开页面可视范围时把表头固定悬浮在上面，如下:


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

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

 done: function () {//表格渲染完成的回调函数
               var 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')//移除样式
                             }
                        })
                      }

然后在head标签里添加style，即可完成

   <style type="text/css">
        .table-header-fixed {
            position: fixed;
            top: 0;
            z-index: 99
        }
    </style>

2021-8-30更新：
如果列数太多时的解决方案：查看此博客