jquery table表头浮动兼容IE8

首先需要写两个表格 一个用于存放数据,一个用于存放表头 

表头table

数据表格table

然后用jquery 监听 滚动条事件,

$(window).scroll

获得 表头的浮动高度

table_hd.offset().top;

当滚动条的高度大于 表头的高度的时候,就可以浮动了

如果没有大于表头的高度就还原样式,

var w_scrollTop_o = 0;//移动距离
        window.onload = function() {
            //弹窗定位
            //windowPosition();
            //表格置顶
                $(window).scroll(function() {
                    var table_bod = $(".table_bod"); //表格内容
                    var table_hd = $(".table_hd"); //浮动的表头
                    //var span_up = $(window.frames["content_ifram"].document).contents().find(".sli_btn span").attr('class');
                    if(!table_bod || !table_hd || !table_hd.offset()){
                        return ;
                    }
                    var c_top = table_hd.offset().top; //表头 -获得位移高度 486.5625
                    var w_scrollTop = $(window).scrollTop();  //滚动条的垂直位置
                    if(w_scrollTop > c_top){ //当滚动条的 位置大于 表头的位置,开始悬浮
                        var tb_width = table_bod.width(); //数据表格的宽度
                        table_hd.css({
                            "position" : "fixed",
                            top : w_scrollTop - w_scrollTop, //永远悬浮于滚动条的位置
                        
                        });    
                        
                    }
                    if(w_scrollTop <126){
                        table_hd.removeAttr("style");     
                    }
                });
            };

 这套浮动表头可以兼容所有浏览器,包括ie8也完美运行。

   欢迎讨论,qq:790100703

猜你喜欢

转载自blog.csdn.net/qq_36622632/article/details/82804978