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

 

posted @ 2021-02-10 13:18  原来是个帅小伙  阅读(2030)  评论(0编辑  收藏  举报