原生javascript 固定表头原理与源码

小鱼儿 2022-07-14 11:08 140阅读 0赞

我在工作中需要固定表头这个功能，我不想去找，没意思。于是就写了一个，我写的是angularjs 自定义指令 起了个 "fix-header" 有人叫  “freeze-header” ，算了，看心情吧，最近心情不太好就不改了~~~

想了想，我还是改成原生吧，angularjs就是个毛毛~~~。

先讲一下思路：

**1.想一想，再想一想，肯定用定位了，具体是绝对定位还是固定定位，看实际情况；**

**    2.clone 一份thead元素，用于再创建一个定位的表头；**

**    3.clone有点坑，不能clone当前元素的 实际 宽高 和 事件， 只能获取原先的加上；**

**    4.加scroll事件；**

**    5.我很开心，成功了~~~~；**

**先把页面创建了 ，就叫fixHeaderDemo.html,如下：**

1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <style>
     7         *{
        box-sizing: border-box;}
     8         .table{
        max-width: 100%; width: 100%;border-collapse: collapse;}
     9         .table>thead>tr>th{
        background-color: #059ca1; color:#FFF; padding-top:10px;padding-bottom: 10px;}
    10         .table>thead>tr>th,.table>tbody>tr>td{
        
    11             border:1px solid #CCC;
    12         }
    13     </style>
    14 </head>
    15 <body>
    16 <div style="width: 80%; margin:40px auto; height: 100px;overflow: auto;position: relative;">
    17     <table class="table">
    18         <thead>
    19         <tr>
    20             <th>Name</th>
    21             <th>Age</th>
    22             <th>Address</th>
    23         </tr>
    24         </thead>
    25         <tbody>
    26         <tr>
    27             <td>亚瑟</td>
    28             <td>荆轲</td>
    29             <td>程咬金</td>
    30         </tr><tr>
    31             <td>亚瑟</td>
    32             <td>荆轲</td>
    33             <td>程咬金</td>
    34         </tr><tr>
    35             <td>亚瑟</td>
    36             <td>荆轲</td>
    37             <td>程咬金</td>
    38         </tr><tr>
    39             <td>亚瑟</td>
    40             <td>荆轲</td>
    41             <td>程咬金</td>
    42         </tr><tr>
    43             <td>亚瑟</td>
    44             <td>荆轲</td>
    45             <td>程咬金</td>
    46         </tr><tr>
    47             <td>亚瑟</td>
    48             <td>荆轲</td>
    49             <td>程咬金</td>
    50         </tr><tr>
    51             <td>亚瑟</td>
    52             <td>荆轲</td>
    53             <td>程咬金</td>
    54         </tr><tr>
    55             <td>亚瑟</td>
    56             <td>荆轲</td>
    57             <td>程咬金</td>
    58         </tr><tr>
    59             <td>亚瑟</td>
    60             <td>荆轲</td>
    61             <td>程咬金</td>
    62         </tr><tr>
    63             <td>亚瑟</td>
    64             <td>荆轲</td>
    65             <td>程咬金</td>
    66         </tr><tr>
    67             <td>亚瑟</td>
    68             <td>荆轲</td>
    69             <td>程咬金</td>
    70         </tr><tr>
    71             <td>亚瑟</td>
    72             <td>荆轲</td>
    73             <td>程咬金</td>
    74         </tr><tr>
    75             <td>亚瑟</td>
    76             <td>荆轲</td>
    77             <td>程咬金</td>
    78         </tr>
    79         </tbody>
    80     </table>
    81 </div>
    82 </body>
    83 </html>

![复制代码][copycode.gif]

上面的都太小儿科了，js才是关键。

代码如下，我也不细细的讲了，就是这么干脆，其实真的很简单，有兴趣还能在优化：

![复制代码][copycode.gif]

[copycode.gif]: /images/20220714/47868c354e434ef79fd57f9894d7d184.png