Jquery独自のエコロジーは、スクロールバーとしてスクロールするテーブルヘッダーを実装します。

最近、あるプロジェクトに取り組んでいたところ、突然、ユーザーがテーブルヘッダーをフローティングにするよう要求しました（コンテンツが同じページに表示され、スクロールすると列ヘッダーが見えなくなるため）。この機能は jquery pure html を使用して実装されているため、変更を減らすために、スクロールを実装するには jquery 独自のエコロジーを使用する必要があります。

html ヘッダー コード:

コードをコピー コードは次のとおりです:

;/td>

>
人材トレーニング
専門職の肩書き構造
学位構造 td>
学生と教師の比率
科学研究プロジェクト
科学研究業績賞
科学研究論文



教育単位
学部学生数 td>
大学院生の数教員数
上級職員数
博士号数学位取得職員数
修士号取得職員数
学部生と教員の比率
大学院生教師の比較
垂直プロジェクト
国家科学研究結果
省庁レベルの科学研究結果
地方レベルの科学研究結果県レベルの科学研究結果 >学校レベルの科学研究成果その他の科学研究成果

第 2 部門賞の雑誌記事第 3 部門賞の雑誌記事 td>一般雑誌記事
海外雑誌記事
給与


jquery コード:




コードをコピー


コードは次のとおりです。 🎜>

$(window).scroll(function(){ var headers = $(".header");//すべてのヘッダー行を取得します。現在のヘッダー行は 3 行のヘッダーです
var yy = $(this).scrollTop();//スクロールバーの上部の値
if(yy>55){

yy = yy-55; var height1 = yy ; //最初の行の先頭の値var height2 = $(headers[0]).height() yy;//いいえ。行の上部の値、最初の行の行の高さと の上部の値の合計です。スクロールバー var height3 = $(headers[0]).height() headers[1]).height() yy; $(headers[0]).css({"position":"absolute",top:height1 "px"});//浮動行$ (headers[1]).css( {"position":"absolute",top:height2 "px"}); $(headers[2]).css({"position":"absolute",top) :height3 "px"});

[javascript] view plaincopy

$("#hiddenTd").height($(headers[0]).height() $(headers[ 1]).height() $( headers[2]).height());//ヘッダーがフローティングになると、対応するテーブルがヘッダーをフロートさせるため、コンテンツは上書きされず、高さはテーブルのヘッダー

の高さになります。
注: 複数行のヘッダーを使用する場合は、セルで rowspan 属性を使用しないでください。使用しないと、ヘッダーの位置がずれてしまいます。