当表格过长,表头离开页面可视范围时把表头固定悬浮在上面,如下:
思路:问题的关键是如何知道表头是否超出可视范围,首先我们需要知道表头到文档顶部的距离,这个距离是不会变的(除非操控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更新:
如果列数太多时的解决方案:查看此博客