最近接到一個需求，要求做表格標題隨頁面滾動，表格表頭固定在頁面頂端，這個任務以前也完成過，但這次實現出現了一些問題，在此記錄下來。

首先重現一下基本的思路，在表格和表頭都已經是設計好的並且固定的情況下，重新在div裡新建一個表格的表頭，格式和樣式要和顯示出來的表頭一樣，然後設定樣式

        #table
        {
            display: none;
            position: fixed;
            top: 0px;
        }

然後就是寫js,思路為監聽頁面的滑動事件，如果頁面滑動的距離

$(document).ready(function() {
            // 先取得兩個元素
            var $tgridView = $("#gridView");//目標表格
            var $tScroll = $("#tScroll");//固定的表頭，現在是隱藏狀態
            var top = $tgridView.offset().top // 標題距離頁面頂部的位置

            //在第一次載入時，offset.top取得的值是當前元素到頁面頂端的高度，而不是預想中的到當前iframe的高度，故做此處理，可以隨專案情況改動
            if (top == 303) {
                top = 90;
            };
    //監聽滑動事件
            $(document).scroll(function() {
                var data = $tScroll.data("scroll");給表格元素附上一個值，作為判斷是否是隱藏的狀態
                data = data || false;//無論當前頁面是什麼狀態，預設的值都為false,即是隱藏狀態，將要顯示

                // 當滾動到表頭被遮蓋時
                if ($(this).scrollTop() >= top) {
                    // data為false，則顯示固定的表頭，反之則不顯示
                    if (!data) {
                        $tScroll.show().data("scroll", true)
 
;//顯示後，將狀態改變，下同
                    }
                } else {
                    if (data) {
                        $tScroll.data("scroll", false).hide();
                    }
                }
            });
        });

具體思路就是這樣，此時要注意幾個問題，第一是scrollTop屬性有可能一直返回0，導致程式出錯，在Stack Overflow上查到的解決方法：