最近、あるプロジェクトに取り組んでいたところ、突然、ユーザーがテーブルヘッダーをフローティングにするよう要求しました（コンテンツが同じページに表示され、スクロールすると列ヘッダーが見えなくなるため）。この機能は jquery pure html を使用して実装されているため、変更を減らすために、スクロールを実装するには jquery 独自のエコロジーを使用する必要があります。 html ヘッダー コード: コードをコピー コードは次のとおりです: ;/td> > 人材トレーニング 専門職の肩書き構造 学生と教師の比率科学研究プロジェクト科学研究業績賞 科学研究論文 教育単位 学部学生数 大学院生の数教員数上級職員数 博士号数学位取得職員数 修士号取得職員数 学部生と教員の比率 大学院生教師の比較 垂直プロジェクト 国家科学研究結果 省庁レベルの科学研究結果地方レベルの科学研究結果県レベルの科学研究結果 >学校レベルの科学研究成果その他の科学研究成果< ;第 1 部門賞の雑誌記事第 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 属性を使用しないでください。使用しないと、ヘッダーの位置がずれてしまいます。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
