js固定表头

css代码片.

        #fixed_table #fix_tr1{
            background: #FFFFFF;
        }
        #fixed_table #fix_tr2{
            background: #FFFFFF;
        }
        #fixed_table{
            position: absolute;
            top: 0px;
            left: 0px;
            /*table-layout:fixed;*/
        }
        .scroll_table_content{
            width:100%;
            height:600px;
            overflow:auto;
        }
        #shelter{
            background-color:White
        }
        td{
            border:1px solid red;
        }
        #areas{
            padding: 0 10px;
            float: left;
            position: absolute;
            z-index: 999;
            background: #e5f1ff;
            border-right: 1px solid #ddd;
        }

html代码片.

<div class="scroll_table_content" id="scroll_wrap">
        <table id="top_fix_table" border="0" cellpadding="4" cellspacing="0" class="table table-hover" style="white-space: nowrap;">
            <thead id="theadid">
            <tr id="table_tr1">
            </tr>
            <tr id="table_tr2">
            </tr>
            </thead>
            <tbody id="tbody">
            </tbody>
        </table>
        <div id="test_width"></div>
    </div>

js代码片.

function frozenHeader() {
        $("#fix_theadid").html("");
        var sourceTable = $("#top_fix_table");
        var sourceTableHead = $("#theadid");
        var headHeight = sourceTableHead.height();
        var sourceTableWidth = sourceTable.outerWidth();
        var testDiv = $("#test_width"); 
        var wrapDiv = $("#scroll_wrap"); 
        var tempTop = wrapDiv.offset().top - $(window).scrollTop(); 
        $('body').append('<div id="shelter"><div id="fixed_table_wrap"><table id="fixed_table"  border="0" cellpadding="4" cellspacing="0" class="table table-hover" ><thead id="fix_theadid"></thead></table></div></div>');
        var fixTopDiv = $("#shelter");
        fixTopDiv.hide();
        fixTopDiv.css({
            'height': headHeight,
            'position': 'fixed',
            'top': tempTop + "px",
            'margin-left': 108+"px",
            'width': testDiv.width() + "px",
            'overflow': 'hidden'
        });
        $("#fixed_table_wrap,#fixed_table").css({'width': sourceTableWidth + "px"});
        $("#fixed_table_wrap,#fixed_table,#fix_theadid").css({'height': headHeight + "px"});
        Head = $("#table_tr1").clone().attr('id', 'fix_tr1');
        targetHead.appendTo('#fix_theadid');
        var targetHead2 = $("#table_tr2").clone().attr('id', 'fix_tr2');
        targetHead2.appendTo('#fix_theadid');
        $("#table_tr1 th").each(function(index,value){
            var tempWidth = $(value).outerWidth();
            var tempHeight = $(value).outerHeight();
            $("#fix_tr1 th").eq(index).css({'width':tempWidth+"px",'height':tempHeight+"px"});
        });
        $("#table_tr2 th").each(function(index,value){
            var tempWidth = $(value).outerWidth();
            var tempHeight = $(value).outerHeight();
            $("#fix_tr2 th").eq(index).css({'width':tempWidth+"px",'height':tempHeight+"px"});
        });
            wrapDiv.scroll(function () {
            var sl = -Math.max(wrapDiv.scrollLeft(), 
            $('document').scrollLeft());
            if (isNaN(sl)) {
                sl = -wrapDiv.scrollLeft();
            }
            fixTopDiv.css("left", sl + 'px');
            var scroll_top = wrapDiv.scrollTop() - headHeight + 
            $(window).scrollTop();
            tempTop = wrapDiv.offset().top - $(window).scrollTop();
            if (tempTop <= 0) {
                tempTop = 0;
            }
            var baseWidth = testDiv.width() + wrapDiv.scrollLeft();
            if (scroll_top >= 0) {
                fixTopDiv.css({'top': tempTop + "px", 'width': baseWidth + "px"});
                if (!fixTopDiv.is(':visible')) {
                    fixTopDiv.show();
                }
            } else {
                if (fixTopDiv.is(':visible')) {
                    fixTopDiv.hide();
                }

            }
        });
        
        $(window).on('scroll', function () {
            tempTop = wrapDiv.offset().top - $(window).scrollTop();
            var scroll_top = wrapDiv.scrollTop() - headHeight + 	          
            $(window).scrollTop();
            var baseWidth = testDiv.width() + wrapDiv.scrollLeft();
            if (tempTop <= 0) {
                tempTop = 0;
            }
            console.log(scroll_top);
            fixTopDiv.css({'top': tempTop + "px", 'width': baseWidth + "px"});
         
            if (scroll_top >= 0) {
                if (!fixTopDiv.is(':visible')) {
                    fixTopDiv.show();
                }
            } else {
                if (fixTopDiv.is(':visible')) {
                    fixTopDiv.hide();
                }
            }
        });
    }