[JavaScript]利用JavaScript來做到類似EXCEL凍結抬頭列的效果

    　滾動資料時固定HTML Table的抬頭TR行，原理是主要利用監聽DIV的滾動事件，
並同時去移動該Table的TR元素來保持抬頭行不動。

首先在HTML上加入Table元素，且用div包起來並調整Style來限制高度，
如此畫面上就會有一個小型的scrollbar

<div id="div1" style="overflow: auto; height:150px">
    <table id="table1" class="tableStyle">
        <tr class="trTitle">
            <td>A</td>
            <td>B</td>
        </tr>
        <tr>
            <td>項目1</td>
            <td>項目1</td>
        </tr>
        <tr>
            <td>項目2</td>
            <td>項目2</td>
        </tr>
        <tr>
            <td>項目3</td>
            <td>項目3</td>
        </tr>
        <tr>
            <td>項目4</td>
            <td>項目4</td>
        </tr>
        <tr>
            <td>項目5</td>
            <td>項目5</td>
        </tr>
    </table>
</div>

再來是JavaScript部分

<script type="text/JavaScript">

//在Div加入滾動事件
document.getElementById("div1").addEventListener("scroll", TableFixHead);

//滾動事件
function TableFixHead (e) {
    //指向初觸發事件的Div
    let DivObj = e.target;
    //被向上捲動的高度
    let ScrHeight = DivObj.scrollTop;
    //抓取被設定為抬頭列的Tr元素陣列並加上往下移動的CSS
    DivObj.querySelectorAll(".trTitle").forEach(ele => ele.style.transform = "translateY(" + ScrHeight + "px)");
}

</script>

完成後成品會如下

A	B
項目1	項目1
項目2	項目2
項目3	項目3
項目4	項目4
項目5	項目5