智能浮动表头

/// <reference path="jquery-1.11.3.js" />
//实现表头智能浮动,容器如果指定则在容器中浮动,不指定则在window中浮动
//要求表格要有thead部份
//调用:
//$("#table1").smartFloatTableHeader(document.getElementById('table1').parentNode);
$.fn.smartFloatTableHeader = function (container, removebody) {
    if (!container) container = window;
    if (typeof (container) == 'string') {
        container = document.getElementById(container);
    }
    var smartFloat = function (element) {
        var newTable = element.clone();                 //复制一个新的表格出来
        if (removebody) {
            newTable.find('tbody').remove();
        } else {
            newTable.find('tbody').hide();                      //表体隐藏
        }
        $(newTable).insertBefore(element).hide();               //先不显示复制出来的表格
        $(element).parents().scroll(function () {               //监控容器及父元素滚动事件
            var containerTop = container == window ? 0 : $(container).offset().top,  //容器顶部位置
                elementTop = element.offset().top,          //最少滚动多少才到隐藏位置
                scrolls = $(this).scrollTop(),              //滚动高度
                emementHeight = $(element).outerHeight(),   //元素总高度,考虑可能是动态的,每次滚动时判断
                offset = $(element).offset();               //源控件位置
            //源表头进入隐藏区域并且表尾未进入隐藏区域时显示复制内容
            if (containerTop > elementTop && containerTop < elementTop + emementHeight) {
                newTable.css({ width: element.outerWidth() }).show();    //设置复制出来的表格与源表格同宽度(某些控件生成的表格未设置宽度)
                if (window.XMLHttpRequest) {
                    newTable.css({
                        position: "fixed",
                        top: containerTop,
                        left: offset.left
                    });
                } else {//这段针对老式浏览器,未测试
                    newTable.css({
                        top: scrolls - containerTop,
                        left: $(element).position().left
                    });
                }
            } else {
                newTable.hide();
            }
        });
    };
    return $(this).each(function () {
        smartFloat($(this));
    });
};

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Hello World,

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值