快捷導(dǎo)航

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

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

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

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

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">科研項(xiàng)目</td> 
<td colspan="6">科研成果獎(jiǎng)</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>高級(jí)教職工數(shù)</td> 
<td>中級(jí)教職工數(shù)</td> 
<td>博士學(xué)位職工數(shù)</td> 
<td>碩士學(xué)位教職工數(shù)</td> 
<td>本科生生師比</td> 
<td>研究生生師比</td> 
<td>縱向項(xiàng)目</td> 
<td>橫向項(xiàng)目</td> 
<td>國家級(jí)科研成果</td> 
<td>部級(jí)科研成果</td> 
<td>省級(jí)科研成果</td> 
<td>地級(jí)科研成果</td> 
<td>校級(jí)科研成果</td> 
<td>其它科研成果</td> 
<td>核心期刊論文</td> 
<td>一類獎(jiǎng)勵(lì)期刊論文</td> 
<td>二類獎(jiǎng)勵(lì)期刊論文</td> 
<td>三類獎(jiǎng)勵(lì)期刊論文</td> 
<td>一般期刊論文</td> 
<td>國外期刊論文</td> 
<td style="border-top:0px;">財(cái)務(wù)工資</td> 
</tr> 

jquery代碼：

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

 
$(window).scroll(function(){ 
var headers = $(".header");//獲取所有表頭行，當(dāng)前的是3行表頭 
var yy = $(this).scrollTop();//滾動(dòng)條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">滾動(dòng)條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"});//浮動(dòng)行 
$(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">//由于表頭浮動(dòng)，對(duì)應(yīng)的表內(nèi)容自動(dòng)上移，為了浮動(dòng)表頭不會(huì)覆蓋表內(nèi)容，設(shè)置空行，高度為表頭高</span> 