Layui表格过长,需固定悬浮表头在顶部

前要：后台系统适用的是Layui中间库，表格没有分页的，所以表格太长，需求是滚动到一定的位置的时候筛选表单和表格的表头进行固定浏览器顶端！

方法一：插入class类

let headerTop = $('#editForm').offset().top;$(window).scroll(function () {if ((headerTop - $(window).scrollTop()) < 0) { $('#editForm').addClass('addFilexd'); $('#editForm').addClass('layui-table-header'); } else {$('#editForm').removeClass('addFilexd');$('#editForm').removeClass('layui-table-header');}});

.addFilexd{position: fixed;top: 0;z-index: 999;background: #fff;width: 100%;
}
.layui-table-header{position: fixed;top: 100px;z-index: 999;
}

思路：定义表单和表头的类，当滑动的距离与原来表单距离顶端的距离相差<0的时候插入对于的类样式，否则去掉！

方法二：插入对应的内联样式
原因：上面插入的class相对于Layui内置的样式优先级不够高，没有作用起来！所以还是要插入对应的内敛样式！

let headerTop = $('#editForm').offset().top;$(window).scroll(function () {if ((headerTop - $(window).scrollTop()) < 0) { // $('#editForm').addClass('addFilexd'); $('#editForm').css({position: 'fixed',top: '0','z-index': '999',background: '#fff','width': '100%'}); $('.layui-table-header').css({position: 'fixed',top: '100px','z-index': '999'}); } else {// $('#editForm').removeClass('addFilexd');$('#editForm').css({position: 'unset',top: '0','z-index': '0'}); $('.layui-table-header').css({position: 'unset',top: '100px','z-index': '0'}); }});

方法三：使用表格自带的回调

思路：问题的关键是如何知道表头是否超出可视范围，首先我们需要知道表头到文档顶部的距离，这个距离是不会变的（除非操控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；width: 100%;overflow: hidden;}
</style>

给.table-header-fixed 添加固定宽度就可以了！

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！