jquery - 1 つのスクロールバー (スライダー) を使用する複数のグリッドビューの固定ヘッダー

Question

1 ページに 4 つの asp.net グリッドビューがあります。Jquery スライダーを使用して、それらすべてを同時にスクロールします (垂直方向のみ)。スクロール中にヘッダー行を固定するにはどうすればよいですか?

すべてのグリッドは更新パネル内にあります。

各グリッドビューは Div 内にあります。div のスタイルの例を次に示します。

<div id="grid1Div" style="overflow-y:hidden;" class="gridHeight">

.gridHeight
{
    height:430px;
}

グリッド スタイルの例を次に示します (すべてのスタイルはほぼ同じです)。

<asp:GridView ID="grid1" runat="server" CssClass="exGrid1" AutoGenerateColumns="False" OnRowCreated="grid1_RowCreated" meta:resourcekey="grid1Resource1"  >

.exGrid1 { 
    width: 100%; 
    background-color: #DDE8EE; 
    margin: 0 0 0 0; 
    border: solid 1px #FFFFFF; 
    border-collapse:collapse; 
    color: #666666;
}
.exGrid1 td { 
    padding: 2px; 
    border: solid 1px #FFFFFF; 
    color: #666666/*#000000*/; 
    font-size: 0.8em; 
}
.exGrid1 th { 
    padding: 4px 2px; 
    color: #FFFFFF; 
    background: #76B7E2 url(grd_head.png) repeat-x top; 
    border-left: solid 1px #FFFFFF; 
    font-size: 0.8em; 
}
.exGrid1 .alt { background: #fcfcfc url(grd_alt.png) repeat-x top; }
.exGrid1 .pgr { background: #424242 url(grd_pgr.png) repeat-x top; }
.exGrid1 .pgr table { margin: 5px 0; }
.exGrid1 .pgr td { 
    border-width: 0; 
    padding: 0 6px; 
    border-left: solid 1px #666; 
    font-weight: bold; 
    color: #FFFFFF; 
    line-height: 12px; 
 }   
.exGrid1 .pgr a { color: #666; text-decoration: none; }
.exGrid1 .pgr a:hover { color: #000; text-decoration: none; }

そして、ここにすべてのグリッドのスクロールの高さを設定する Jquery 部分があります。

function setGridScroll() {
    var scrollPane = $('#divScroll');
    var scrollGrid1 = $('#grid1');
    var scrollGrid2 = $('#grid2');
    var scrollGrid3 = $('#grid3');
    var scrollGrid4 = $('#grid4');

    var scrollMaxHei = $('#grid1')[0].scrollHeight - 230;
    scrollPane.slider({
        orientation: "vertical",
        value: scrollMaxHei-200,
        min: 200,
        max: scrollMaxHei,
        slide: function (event, ui) {
            var setValue = scrollMaxHei - ui.value-200;
            scrollGrid1.scrollTop(setValue);
            scrollGrid3.scrollTop(setValue);
            scrollGrid4.scrollTop(setValue);
            scrollGrid2.scrollTop(setValue);

        }
    });
}

gridview(s) の fixedheader クラスに何かを設定するだけでヘッダーをフリーズできますか?

<HeaderStyle CssClass="fixedHeader" />


.fixedHeader
    {
     position: relative;
    }

これを行う簡単な方法はありますか? すべてのグリッドビューを個別に保持する必要があり、それらすべてにスクロールバーを使用することはできません。また、ユーザーは必要に応じてグリッドビューを非表示にできるため、スクロールバーは独自の div に配置する必要があります。