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

  次阅读 作者:智能小宝 来源:互联网 2016-01-26 11:05 我要评论(0)

表头是浮动的,因为内容在同一页面展示,当滚动时,看不到列头,为了改动少只能使用jquery原生态实现滚动

最近在做一个项目,功能已经实现,突然用户要求表头是浮动的(因为内容在同一页面展示,当滚动时,看不到列头)。由于功能已经实现使用 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值,第一行行高与< /span>滚动条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属性,否则表头会错位

本站文章信息来源于网络以及网友投稿,本站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,并不意味着赞同其观点或证实其内容的真实性。如果您有什么意见或建议,请联系QQ28-1688-302!

人工智能实验室
相关文章相关文章
  • 韩春雨称已能重复实验结果 近期将有消息公布

    韩春雨称已能重复实验结果 近期将有消息公布

  • 英国研发“杀生”机器人 通过生命体获取能量

    英国研发“杀生”机器人 通过生命体获取能量

  • 无人驾驶汽车如何改变城市生活?听听他们怎么说

    无人驾驶汽车如何改变城市生活?听听他们怎么说

  • 未来两年人工智能要怎么走?看这篇就够了

    未来两年人工智能要怎么走?看这篇就够了

网友点评网友点评
阅读推荐阅读推荐

据国外媒体报道,在过去两年内,聊天机器人(chatbot)、人工智能以及机器学习的研发和采用取得了巨大进展。许多初创公司正利用人工智能和...

霍金 视觉中国 图 英国著名物理学家霍金(Stephen Hawking)再次就人工智能(AI)发声,他认为:对于人类来说,强大AI的出现可能是最美妙的...

文|郑娟娟 今年,人工智能(AI) 60岁了。在AI60岁的时候,笔者想要介绍一下AI100,一个刚刚2岁的研究项目,但它的预设寿命是100年,甚至更长...

AlphaGo与李世石的人机大战,为大众迅速普及了人工智能的概念。 但对谷歌而言,除了下围棋,现在的人工智能进展到哪一步了?未来,人工智能...