[JQuery] スクロールでTableのヘッダをシンプルに固定する（レスポンシブ対応）

行数の多いテーブルだと、スクロールしていくとヘッダ部分が消えてしまうので、固定したいときがあります。sそんなとき、なるべくシンプルにコーディングするには、固定用のテーブルを別に用意したほうがシンプルに済みます。

こんな感じで。

名前	性別	年齢
ハナ	メス	5
モモ	メス	6
コタロウ	オス	8
ナナ	メス	4
チョコ	オス	5
モカ	オス	6
リン	メス	3
ココ	メス	7
モコ	オス	2
ラン	メス	11
マロン	オス	5
レオ	オス	6
クルミ	メス	8
コロ	オス	9
ソラ	オス	4
アズキ	メス	5
アンズ	メス	10
ココア	オス	9
サクラ	メス	7
メイ	メス	9
タロウ	オス	12
テン	オス	16
ヒメ	メス	4
フク	メス	8
ルーク	オス	6
ルナ	メス	7
レオン	オス	4
クッキー	メス	13
クロ	オス	5
チロル	メス	6

はじめは、theadをposition:fixed;で固定しようかと試行錯誤したのですが、tableのborder幅に振り回されたり、レスポンシブで幅が変わるとうまく合わせられないとか、悪戦苦闘するうちに、固定用のtableを別途用意したほうがシンプルで簡単だという結論に至りました。

あらかじめ、列幅を決めておかないといけませんが、レスポンシブにも対応できます。

HTMLはこんな感じで。sheet　がテーブル本体で、fixheader　が固定用。

<table class="fixheader" style="display: none; position: fixed; top: 0;">
<thead>
<tr><th width="40%">名前</th><th width="30%">性別</th><th width="30%">年齢</th></tr>
</thead>
</table>

<table class="sheet">
<thead>
<tr><th width="40%">名前</th><th width="30%">性別</th><th width="30%">年齢</th></tr>
</thead>
<tbody>
<tr><td>ハナ</td><td>メス</td><td>5</td></tr>
<tr><td>モモ</td><td>メス</td><td>6</td></tr>
<tr><td>コタロウ</td><td>オス</td><td>8</td></tr>
<tr><td>ナナ</td><td>メス</td><td>4</td></tr>
<tr><td>チョコ</td><td>オス</td><td>5</td></tr>
<tr><td>モカ</td><td>オス</td><td>6</td></tr>
<tr><td>リン</td><td>メス</td><td>3</td></tr>
<tr><td>ココ</td><td>メス</td><td>7</td></tr>
<tr><td>モコ</td><td>オス</td><td>2</td></tr>
<tr><td>ラン</td><td>メス</td><td>11</td></tr>
<tr><td>マロン</td><td>オス</td><td>5</td></tr>
<tr><td>レオ</td><td>オス</td><td>6</td></tr>
<tr><td>クルミ</td><td>メス</td><td>8</td></tr>
<tr><td>コロ</td><td>オス</td><td>9</td></tr>
<tr><td>ソラ</td><td>オス</td><td>4</td></tr>
<tr><td>アズキ</td><td>メス</td><td>5</td></tr>
<tr><td>アンズ</td><td>メス</td><td>10</td></tr>
<tr><td>ココア</td><td>オス</td><td>9</td></tr>
<tr><td>サクラ</td><td>メス</td><td>7</td></tr>
<tr><td>メイ</td><td>メス</td><td>9</td></tr>
<tr><td>タロウ</td><td>オス</td><td>12</td></tr>
<tr><td>テン</td><td>オス</td><td>16</td></tr>
<tr><td>ヒメ</td><td>メス</td><td>4</td></tr>
<tr><td>フク</td><td>メス</td><td>8</td></tr>
<tr><td>ルーク</td><td>オス</td><td>6</td></tr>
<tr><td>ルナ</td><td>メス</td><td>7</td></tr>
<tr><td>レオン</td><td>オス</td><td>4</td></tr>
<tr><td>クッキー</td><td>メス</td><td>13</td></tr>
<tr><td>クロ</td><td>オス</td><td>5</td></tr>
<tr><td>チロル</td><td>メス</td><td>6</td></tr>
</tbody>
</table>

<thead>

</thead>

</table>

<thead>

</thead>

<tbody>

</tbody>

</table>

JQueryは、スクロールでテーブルが一番上に来たら、固定用テーブル（fixheader）を表示させるだけの簡単なものです。

ただし、レスポンシブで幅が変わったときのために、$(window).resize でテーブル幅を一致させています。

<script>
            jQuery(function($){
                var tableSheet = $('table.sheet');
                var offset = tableSheet.offset();
                $('.fixheader').width(tableSheet.width());

                $(window).scroll(function () {
                    if($(window).scrollTop() > tableSheet.offset().top
                    &amp;&amp; $(window).scrollTop() < (tableSheet.offset().top + tableSheet.height() ) ) {
                        var fixheaderTop = $(window).scrollTop();
                        $('.fixheader').show();
                    } else {
                        $('.fixheader').hide();
                    }
                });
                
                $(window).resize(function() {
                    $('.fixheader').width(tableSheet.width());
                });

            });
</script>

jQuery(function($){

var tableSheet = $('table.sheet');

var offset = tableSheet.offset();

$('.fixheader').width(tableSheet.width());

$(window).scroll(function () {

if($(window).scrollTop() > tableSheet.offset().top

&& $(window).scrollTop() < (tableSheet.offset().top + tableSheet.height() ) ) {

var fixheaderTop = $(window).scrollTop();

$('.fixheader').show();

} else {

$('.fixheader').hide();

}

});

$(window).resize(function() {

$('.fixheader').width(tableSheet.width());

});

</script>