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

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 教程,其他

首先添加样式类.table-header-fixed { top: 0; position: fixed; z-index: 999; }在table表格渲染完后,增加js代码如下var header

首先添加样式类

.table-header-fixed {
    top: 0;
    position: fixed;
    z-index: 999;
}

在table表格渲染完后,增加js代码如下

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'); //移除样式
    }
});
//滚动body,header跟随滚动
$('.layui-table-body').on('scroll', function(e) {
    var leftPx = $(e.target).scrollLeft(); //获取表格body,滚动条距离左边的长度
    var left = 'translateX(-' + leftPx + 'px)';
    $('.layui-table-header .layui-table').css('transform', left); //设置表格header的内容反向(-)移动
});

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

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

粉丝

0

关注

0

收藏

0

已有0次打赏