您现在的位置是：首页 > 网站建设常见问答网站建设常见问答

table表头和首列的表格固定实现思路

2018-07-31【网站建设常见问答】2299 人已围观

简介有一些多行资料显示的页面上, 表头经常因为下拉后看不到,用户意见就会提出来. 解决这个问题的最好办法是浮动表头. 目前较现...

有一些多行资料显示的页面上, 表头经常因为下拉后看不到,用户意见就会提出来. 解决这个问题的最好办法是浮动表头. 目前较现实的实现这个功能有js jquery 还有bootstrap. 在一些特定的美工系统里未必使用bootstrap. 那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;

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"});