解決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>