table實現下滑表頭懸浮在頁面頂部效果

本文轉載自查看原文 2020-01-07 11:00 1102 HTML

思路:將table分為兩個表,表頭部分和內容部分,通過jquery實時控制上下兩表的th,td寬度統一,在表頭部分觸頂時改變定位方式使它懸浮

代碼如下:

<!DOCTYPE html>
<html>
<head>
    <title>懸浮table頭</title>
    <style type="text/css">
        th{background: green}
        th,td{line-height: 200px;border: 1px solid #eee;width: 200px;}
        .table{word-break:break-all;word-wrap:break-word}
    </style>
</head>
<body>
    <div style="width: 100%;height: 50px;background: yellow;">導航欄</div>
    <table id="header_table" style="top: 0;z-index: 1000;margin-bottom: 0px;" class="table">
        <thead id="t_thead">
        <tr>
            <th>標題一</th>
            <th>標題二</th>
            <th>標題三</th>
            <th>標題四</th>
            <th>標題五</th>
        </tr>
        </thead>
    </table>
    <table id="body_table" class="table">
        <tbody>
        <tr><td>內容一</td><td>內容二</td><td>內容三</td><td>內容四</td><td>內容五</td></tr>
        <tr><td>內容一</td><td>內容二</td><td>內容三</td><td>內容四</td><td>內容五</td></tr>
        <tr><td>內容一</td><td>內容二</td><td>內容三</td><td>內容四</td><td>內容五</td></tr>
        <tr><td>內容一</td><td>內容二</td><td>內容三</td><td>內容四</td><td>內容五</td></tr>
        <tr><td>內容一</td><td>內容二</td><td>內容三</td><td>內容四</td><td>內容五</td></tr>
        <tr><td>內容一</td><td>內容二</td><td>內容三</td><td>內容四</td><td>內容五</td></tr>
        <tr><td>內容一</td><td>內容二</td><td>內容三</td><td>內容四</td><td>內容五</td></tr>
        <tr><td>內容一</td><td>內容二</td><td>內容三</td><td>內容四</td><td>內容五</td></tr>
        <tr><td>內容一</td><td>內容二</td><td>內容三</td><td>內容四</td><td>內容五</td></tr>
        </tbody>
    </table>
</body>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
    // 調整上下表寬度統一
    var tableHd = $("#header_table");
    var tableTop = tableHd.offset().top;
    $(window).scroll(function(){
        var _t = $(window).scrollTop();

        if(_t-tableTop>=0){
            //table-header 已經到窗口頂部了
            tableHd.css({
                "position":"fixed"
            })
        }else{
            tableHd.css({
                "position":"static"
            })
        }
    });
    autoWidth();
    function autoWidth(){
        var body_first_tr = $('#body_table').width();
        $('#header_table').width(body_first_tr);


        for(var i=0;i<5;i++){
            var header_id = '#body_table tbody tr:eq(0) td:eq('+i+')';
            var body_id = '#header_table thead tr:eq(0) th:eq('+i+')';
            var body_first_tr = $(header_id).width();
            $(body_id).width(body_first_tr);
        }
        //console.log(body_first_tr);
    }
    $(window).resize(function () {//當瀏覽器大小變化時
        autoWidth();
    });
</script>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。