美文网首页
layui数据表格固定表头

layui数据表格固定表头

作者: 戬谷stone | 来源:发表于2020-05-19 14:47 被阅读0次

    <style>

    .layui-table-header-flow {

    background: #FFFFFF none repeat scroll 0 0;

    line-height: 30px;

    border-bottom: 1px solid #ccc;

    position: fixed;

    top: 0px;

    _position:absolute;

    top:expression((offsetParent.scrollTop)+0);

    z-index: 2;

    }

    </style>  

    <script>

    layui.config({ base: '/static/admin/' //静态资源所在路径

    }).extend({ index: 'lib/index' //主入口模块 }).use(['index','table'], function(){

    var $ = layui.$ ,

    form = layui.form ,

    table = layui.table;

    var flow=$(".layui-table-header");

    var top=flow.offset().top;

    var top=flow.offset().top;

    $(window).on('scroll', function () {

    if ($(this).scrollTop()>top){

    flow.addClass("layui-table-header-flow");

    } else{

    flow.removeClass("layui-table-header-flow");

    }

    })

    </script>

    相关文章

      网友评论

          本文标题:layui数据表格固定表头

          本文链接:https://www.haomeiwen.com/subject/fnrbohtx.html