ASP.NET GridView Header flow by scroll up and down use JQuery | WebForm的Gridview 欄標題 以JQuery置頂的方法

WebForm的Gridview元件想要讓欄標題可以置頂的方法

我的Gridview是用template做版面的，資料很多很長，捲下去時就看不見欄標題，很不方便，

解法參考來源:
http://stackoverflow.com/questions/2177983/how-to-make-div-follow-scrolling-smoothly-with-jquery
answered by ajax333221

1.原本是只有設定HeaderText，現在要加上HeaderTemplate，然後用div包起來標題文字

<asp:TemplateField HeaderText="標題" HeaderStyle-HorizontalAlign="Left">

                                <HeaderTemplate>

                                    <div class="divTH">

                                        <label>標題</label>

                                    </div>

                                </HeaderTemplate>

                                <ItemTemplate>

                                   ......

                                </ItemTemplate>

</asp:TemplateField>

2.div給一個css class，這個class加上fixed時就會固定置頂

.divTH.fixed {

                position: fixed;

                top: 0;

            }

3.JQUERY

$(document).ready(function () {

if (!($.browser == "msie" && $.browser.version < 7)) {

            var target = ".divTH", top = $(target).offset().top - parseFloat($(target).css("margin-top").replace(/auto/, 0));

            $(window).scroll(function (event) {

                if (top <= $(this).scrollTop()) {

                    $(target).addClass("fixed");

                } else {

                    $(target).removeClass("fixed");

                }

            });

        }

});

2015/12/25 追記:
如果有GridView是不要一進網頁就databinding的，那網頁ready的時候就沒有欄位標題可以註冊，
這樣就讓效果無效了，我想到的兩種解決方法：

一種是把Jquery部分改放到function pageLoad() { }事件，
這個事件會在aspx postback回來後觸發
但要判斷有沒有註冊過window scroll 才去註冊那個事件
不然每次post back都會註冊一次 就會有問題
我沒有把這方法做完，改用我想到的第二種方法

第二種比較簡單的方法是，設定gridview屬性ShowHeaderWhenEmpty="true"
然後在page load事件給gridview空的source後bind
gv.DataSource = new DataTable();
gv.DataBind();
這樣就會沒資料但顯示標頭，就可以讓javascript註冊事件