宁波网站建设咨询:宁波网站建设
137 8002 6116 宁波网站制作
首页
关于殷雯
网站建设
新闻/观点
网站案例
联系我们
殷雯动态
网站建设常见问答
网络推广
技术交流
PHP技术
你的位置:首页> 新闻/观点 > 网站建设常见问答>table表头和首列的表格固定实现思路
网站建设常见问答
table表头和首列的表格固定实现思路

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

   有一些多行资料显示的页面上, 表头经常因为下拉后看不到,用户意见就会提出来. 解决这个问题的最好办法是浮动表头.  目前较现实的实现这个功能有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"}); 



点击:  196    时间: 2018-07-31
上一条: 在HTML中引入css的其中的两个方法
下一条: 建军节最美的祝福语给最美的人
 
 
 
快速通道: 关于我们    网站建设    主机域名    付款方式    我的声明
  
联系我们
手机扫描QQ
网站建设咨询:
咨询热线:
宁波殷雯网站建设工作室
地 址: 浙江省宁波市江东区
电 话: 137 8002 6116 
邮 箱:
330436190@qq.com
宁波网站建设
宁波网站制作
137 8002 6116
宁波殷雯网站建设工作室 版权所有