最近在做一個(gè)項(xiàng)目，功能已經(jīng)實(shí)現(xiàn)，突然用戶(hù)要求表頭是浮動(dòng)的（因?yàn)閮?nèi)容在同一頁(yè)面展示，當(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 >
<td> </td>
<td colspan="2"> </td>
<td colspan="7">師資力量</td>
<td colspan="14">科研</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="2">人才培養(yǎng)</td>
<td colspan="3">職稱(chēng)結(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> </td>
</tr>
<tr>
<td>教學(xué)單位</td>
<td><a href="javascript:void(0);">本科生數(shù)</a></td>
<td><a href="javascript:void(0);">研究生數(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>國(guó)家級(jí)科研成果</td>
<td>部級(jí)科研成果</td>
<td>省級(jí)科研成果</td>
<td>地級(jí)科研成果</td>
<td>校級(jí)科研成果</td>
<td>其它科研成果</td>
<td>核心期刊論文</td>
<td>一類(lèi)獎(jiǎng)勵(lì)期刊論文</td>
<td>二類(lèi)獎(jiǎng)勵(lì)期刊論文</td>
<td>三類(lèi)獎(jiǎng)勵(lì)期刊論文</td>
<td>一般期刊論文</td>
<td>國(guó)外期刊論文</td>
<td>財(cái)務(wù)工資</td>
</tr>

復(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>//第一行top值，第一行行高與</span><span>滾動(dòng)條top值之和</span><span>
</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>//由于表頭浮動(dòng)，對(duì)應(yīng)的表內(nèi)容自動(dòng)上移，為了浮動(dòng)表頭不會(huì)覆蓋表內(nèi)容，設(shè)置空行，高度為表頭高</span>