Jquery原始生態實作表格header頭隨滾動條滾動而滾動_jquery

最近在做一個項目，功能已經實現，突然用戶要求表頭是浮動的（因為內容在同一頁展示，當滾動時，看不到列頭）。由於功能已經實現使用jquery 純html，為了改動少只能使用jquery原生態實現滾動。

html表頭程式碼：

複製程式碼 程式碼如下：

師資力量
科研




人才培養
職稱結構
學位結構
生師比
科研項目
科研成果獎
科研論文



教學單位
本科生數
研究生數
教職員數
高級教職員數
中級教職員數
博士職工數
碩士學位教職員數 td>
大學生師比
研究生生師比
縱向專案
橫向項目
國家級科研成果
部級科研成果
省級科研成果
地級科研成果
校級科研成果
其它科研成果
核心期刊論文 一類獎勵期刊論文
二類獎勵期刊論文
三類獎勵期刊論文

一般期刊論文 國外期刊論文 財務薪資

jquery程式碼：

複製程式碼


代碼如下:var headers = $(".header");//取得所有表頭行，目前的是3行表頭
var yy = $(this) .scrollTop();//捲軸top值
if(yy>55){
yy = yy-55;
}
var height1 = yy;//第一行top值
var height2 = $(headers[0]).height() yy;//第一行top值，第一行行高與捲頂值總和
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屬性，否則表頭會錯位。