1. 程式人生 > >簡單實現Table固定表頭

簡單實現Table固定表頭

下面是本人寫的很簡單的固定TABLE頭部的外掛,他使用動畫來幫你固定表頭,從而在保持表頭格式的同時,不會損耗太多效能

有用就給個start唄

介紹

eleFixed是一款非常簡單的使用動畫來固定元素的外掛(最常見的作用就是固定table的thead)

它可以同時固定多個HTMLElement而不用額外監聽多個事件,而且你也可以隨時刪除某一個監聽物件或者直接把eleFixed從你的網頁中移除

使用

當你引入eleFixed.js的時候,它就已經幫你在全域性定義好了eleFixed物件並監聽scroll事件(僅僅一個);

以下為全域性eleFixed物件的描述:
eleFixed物件 描述
targets Array,用來存放多個需要固定的target物件,target物件格式為
push Function,接受一個target物件並推送元素到targets陣列中
delete Function,從targets中刪除指定的HTMLElement,只需要傳入需要刪除的HTMLElement物件
distory Function,移除eleFixed的監聽事件、並刪除eleFixed物件
eleFixed.push需要傳入的物件(targrt)描述:
target物件 描述
target HTMLElement,接收你想固定的元素,比如 document.getElementsByTagName(‘thead’)[0]
offsetTop Number,此元素距離頂部多少畫素時開始固定在頂部, 比如 200 (無需單位)
插入target:
    <table class="table">
        <thead>
            <!-- some titles here -->
        </thead>
        <tbody>
            <!-- some elements here -->
</tbody> </table> <script src="./eleFixed.min.js"></script> <script> // add an instance eleFixed.push({ target: document.getElementsByTagName('thead')[0], // it must be a HTMLElement offsetTop: 210 // height from window offsetTop }) </script>
效果預覽:

image

刪除元素:
<script>
    // delete an instance
    eleFixed.delete(document.getElementsByTagName('thead')[0])
</script>
移除eleFixed:
<script>
    // distory eleFixed
    eleFixed.distory()
</script>