快捷導(dǎo)航

Jquery原生態(tài)實現(xiàn)表格header頭隨滾動條滾動而滾動

更新時間：2014年03月18日 17:49:25 作者：

表頭是浮動的，因為內(nèi)容在同一頁面展示，當(dāng)滾動時，看不到列頭，為了改動少只能使用jquery原生態(tài)實現(xiàn)滾動

最近在做一個項目，功能已經(jīng)實現(xiàn)，突然用戶要求表頭是浮動的（因為內(nèi)容在同一頁面展示，當(dāng)滾動時，看不到列頭）。由于功能已經(jīng)實現(xiàn)使用jquery+純html，為了改動少只能使用jquery原生態(tài)實現(xiàn)滾動。

html表頭代碼：

復(fù)制代碼代碼如下:

 
<tr class="header" > 
<td width="150" style="border-bottom:0px;"> </td> 
<td colspan="2" style="border-bottom:0px;"> </td> 
<td colspan="7">師資力量</td> 
<td colspan="14">科研</td> 
<td style="border-bottom:0px;"> </td> 
</tr> 
<tr class="header"> 
<td width="150" style="border-top:0px;border-bottom:0px;"> </td> 
<td colspan="2" style="border-top:0px;">人才培養(yǎng)</td> 
<td colspan="3">職稱結(jié)構(gòu)</td> 
<td colspan="2">學(xué)位結(jié)構(gòu)</td> 
<td colspan="2">生師比</td> 
<td colspan="2">科研項目</td> 
<td colspan="6">科研成果獎</td> 
<td colspan="6">科研論文</td> 
<td style="border-top:0px;border-bottom:0px;"> </td> 
</tr> 
<tr class="header"> 
<td width="150" style="border-top:0px;">教學(xué)單位</td> 
<td><a href="javascript:void(0);" id="undergraduate">本科生數(shù)</a></td> 
<td><a href="javascript:void(0);" id="graduate">研究生數(shù)</a></td> 
<td>教職工數(shù)</td> 
<td>高級教職工數(shù)</td> 
<td>中級教職工數(shù)</td> 
<td>博士學(xué)位職工數(shù)</td> 
<td>碩士學(xué)位教職工數(shù)</td> 
<td>本科生生師比</td> 
<td>研究生生師比</td> 
<td>縱向項目</td> 
<td>橫向項目</td> 
<td>國家級科研成果</td> 
<td>部級科研成果</td> 
<td>省級科研成果</td> 
<td>地級科研成果</td> 
<td>校級科研成果</td> 
<td>其它科研成果</td> 
<td>核心期刊論文</td> 
<td>一類獎勵期刊論文</td> 
<td>二類獎勵期刊論文</td> 
<td>三類獎勵期刊論文</td> 
<td>一般期刊論文</td> 
<td>國外期刊論文</td> 
<td style="border-top:0px;">財務(wù)工資</td> 
</tr> 

jquery代碼：

復(fù)制代碼代碼如下:

 
$(window).scroll(function(){ 
var headers = $(".header");//獲取所有表頭行，當(dāng)前的是3行表頭 
var yy = $(this).scrollTop();//滾動條top值 
if(yy>55){ 
yy = yy-55; 
} 
var height1 = yy;//第一行top值 
var height2 = $(headers[0]).height()+yy;<span style="font-family:Arial,Helvetica,sans-serif">//第一行top值，第一行行高與</span><span style="font-family:Arial,Helvetica,sans-serif">滾動條top值之和</span><span style="font-family:Arial,Helvetica,sans-serif"> 
</span> 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());<span style="font-family:Arial,Helvetica,sans-serif">//由于表頭浮動，對應(yīng)的表內(nèi)容自動上移，為了浮動表頭不會覆蓋表內(nèi)容，設(shè)置空行，高度為表頭高</span> 