今回は、jQueryでよく使うテクニックを紹介させていただきます。
よくページをスクロールすると、ヘッダーが固定されたり、途中のコンテンツが固定されるあれです。

今回紹介するのは、ページをスクロールすると表組みが表示されます。その表組みのヘッダー部を固定するテクニックの紹介になります。
参考になれば幸いです。では、トミー行きまーす。

やりたいイメージ

動画を見ていただけますと、イメージが分かるかと思います。
よく見かけるやつですね。では、実装方法を紹介させていただきます。

実装方法について

固定したい要素の表示位置を .offset().top で取得。
$(window).scrollTop() が 要素の位置よりも大きくなった時に、 position を fixed にして対応する。

この手順で実装可能になります。

offset() の基本

offset()は上記のようにドキュメントの左上を起点にしています。
ブラウザの左上ではなく、ドキュメントの左上となります。
なので、スクロールしたら起点はブラウザ上からは見えなくなる、ということになります。

HTML

実装サンプルのソースを見てみましょう。
すいません、説明が下手でソースが長すぎますね。ご了承ください。

固定したい箇所（今回は、タブとテーブルのヘッダー部）にクラス「.navTypeA」としてdivでくくります。
その下には、固定後に表示される内容を記述。

JavaScript（jQuery）

CSS

ポイント

固定位置まで移動した際に、なめらかに動作させるために一工夫がいります。

　 body.is-fixed .koteiArea { padding-top: 82px; }

1 2 3 4

body.is-fixed .koteiArea { padding-top: 82px; }

これは、固定したテーブルのヘッダーの高さが82pxあったので、空き設定を行います。
これをしないと、ID1の内容が固定位置までいった時点で、ヘッダー部の下に隠れてしまい、動きに違和感がでてしまいます。
それを解消するためのテクニックになります。

テーブルの列が意図した幅に調整できない！ってなってる方は、こちらの記事をご参照ください。

【table】widthで指定した幅が反映されない場合の対応方法

2020年7月9日

まとめ

いかがだったでしょうか？
少し分かりづらかったかもしれませんが、よく使うテクニックですので参考になれば幸いです。
色々と応用も効く技術だと思います。

実際、僕は「パークサイドビル様」のサイトで部屋を予約する際に右サイドに現状の料金がでてくるのですがそこで使用しました。
部屋代＋備品のレンタル　をリアルタイムで料金表を表示できるように工夫しました〜。

最後まで、閲覧していただきありがとうございました。