html表头跟随滚动,Jquery原生态实现表格header头随滚动条滚动而滚动

最近在做一个项目，功能已经实现，突然用户要求表头是浮动的(因为内容在同一页面展示，当滚动时，看不到列头)。由于功能已经实现使用jquery+纯html，为了改动少只能使用jquery原生态实现滚动。

html表头代码：

师资力量科研 人才培养职称结构学位结构生师比科研项目科研成果奖科研论文 教学单位 本科生数 研究生数教职工数高级教职工数中级教职工数博士学位职工数硕士学位教职工数本科生生师比研究生生师比纵向项目横向项目国家级科研成果部级科研成果省级科研成果地级科研成果校级科研成果其它科研成果核心期刊论文一类奖励期刊论文二类奖励期刊论文三类奖励期刊论文一般期刊论文国外期刊论文财务工资

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;//第一行top值，第一行行高与滚动条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属性，否则表头会错位。