Jquery元生態実現表headerヘッドはスクロールバーに従ってスクロールします。

最近のプロジェクトでは、機能が実現されていますが、突然ユーザーから要求されたのは、同じページに内容が表示されているため、スクロール時には、列のヘッダが見えません。機能はすでにjquery+純htmlを使用して実現されていますので、変更のためにはjquery原生態を使ってスクロールを実現するしかありません。htmlヘッダコード：

 
<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;">    </td> 
<td colspan="3">    </td> 
<td colspan="2">    </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;">    </td> 
<td><a href="javascript:void(0);" id="undergraduate">    </a></td> 
<td><a href="javascript:void(0);" id="graduate">    </a></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>        </td> 
<td>        </td> 
<td>        </td> 
<td>      </td> 
<td>      </td> 
<td style="border-top:0px;">    </td> 
</tr> 

jqueryコード：

 
$(window).scroll(function(){ 
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;<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">//      ，          ，             ，    ，      </span> 

注意：複数行のヘッダの場合、セルはローソンpan属性を使用しないでください。そうでないと、表ヘッドが外れることがあります。