网页制作中在头部固定悬浮table表头(thead)的方法
这两天接了一个需求，页面是这样的
然后需求是页面中的这个表格当页面向上滚动，且表格的表头到达窗口上方时，表头悬浮在页面的上方，表格正常滚动，这样表格内的数据可以随时看到表头内容。
一开始我认为这是极简单的，就当页面滚动，判断表头到窗口的距离，当=0的时候触发事件然后让表头position:fixed不就万事大吉了吗？于是我对漂亮又萌萌哒的产品妹子说，放心吧，这个简单的很一会就能完事，当时我的表情是这样的
但是当我开始写（首先你要知道，我是个js小白，表问我为什么。。。），问题就来了。首先，这个页面滚动应该用$(window).scroll，那么我怎么去判断表头到窗口的距离呢？我立马想到了offset,这里正好温习一下offset()和position()的区别，首先呢他们确实都代表位置，不过呢 ，offset().top是元素到文档顶部的距离，意思就是这个值呢如果你没操作dom正常来说，是不会发生变化滴，position是元素相对于父元素的距离就更别想了。。。没有一个对劲。。。然后我又想到了scrollTop(),你看这个跟scroll长得那么像肯定没问题！不过等我仔细看了一下API就傻了，"获取匹配的元素集合中第一个元素的当前垂直滚动条的位置或设置每个匹配元素的垂直滚动条位置",读了一遍没读明白，但是我理解的是元素在该区域内的滚动条的滚动距离，比如说你写了一个div，高度固定，然后overflow:scroll,那么该div的scrollTop就是这个内容超出后出现的滚动条的垂直距离，说了一堆感觉好像也没啥用。。。。总之就是不能单纯用scrollTop()来获取这个表头到窗口顶部的距离了。
一时间陷入了僵局。。。怎么办呢，我去厕所思考人生了。。。
嗯，经过在马桶上的思想斗争，我的思路无比开朗。既然单个不行就组合吧，使用$('body').scrollTop()与表头的offset().top差值，因为页面打开默认滚动条是在顶部的，如果要将表头滚到窗口的顶部那么，滚动条就要滚动表头的offset().top的距离，当大于这个值那么表头肯定就已经在顶部的负值区域看不到了，嗯。。。
解决了这个问题之后，我为自己欢欣鼓舞，然而，还有一个问题在等着我。那就是表头直接position:fixed的话，实际上此时表头已经脱离了正常的文档流。除了里面的内容样式都已经没了啊，我摔！就算勉强加上了样式，因为表格的内容是自由扩展的，所以每一列的列宽是由表头和表内的元素共同决定的，单独把表头拿出来是不行不行滴啊！！
然后，嗯，我动态生成了一个div，clone了整个表，获取表头的高给这个div，然后让这个div overflow:hidden了！天阿鲁，我简直就是个天才。不再废话了，献上源码~
<script src="js/jquery-latest.js"></script>
<script>
$(function(){
var scroll_bar = $("#scroll_bar");//表格的id
var bar_head = $("#bar_head");//表头
var bar_height = bar_head.height();//表头高
var sroll_header= scroll_bar.clone().attr('id','bb');//更改复制的表格id
$(window).scroll(function(){
var scroll_top = $('body').scrollTop() - scroll_bar.offset().top;//判断是否到达窗口顶部 if (scroll_top > 0) {
$('body').append('<div id="shelter"></div>');//复制的表格所在的容器
$("#shelter").css({'height':bar_height,'position':'fixed','top':'0','overflow':'hidden','width':'1200px','margin': '0 auto','left':'0','right':'0','border-bottom':'1px solid #c8c8c8'});
sroll_header.appendTo('#shelter');
$('#shelter table').removeClass(); //删除table原来有的默认class，防止margin,padding等值影响样式
$('#shelter table').css({'width':'100%','background-color':'#f0f0f0'});
$('#shelter table tr th').css({'height': bar_height,'width':'140px','border':'1px solid #c8c8c8'});//此处可以自行发挥
$('#shelter table tr td').css({'padding':'10px','text-align':'center'}); $('#shelter').show(); }else {
$('#shelter').hide();
}
}); }); </script>
另外附上一个我找的其他实现方法，但是我觉得太重，所以放弃了，还是把链接放下大家自己参考吧
http://www.uedsc.com/sticky-table-headers-columns.html
就这么多吧，欢迎各位童鞋批评质疑~
因为到现在我还是不知道怎么上传这个代码的压缩包，所以我就直接把完整的一个demo代码放这边吧，这个代码依赖jQuery，我的版本是1.8.3，
不过我的方法里面好像没有涉及到版本更新会引起冲突的内容，所以应该对jQuery的版本要求不高。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格顶部悬浮效果</title>
<script src="jquery-latest.js"></script>
<style>
.container {
width: 980px;
margin: 0 auto;
}
.top {
height: 100px;
background-color: #80ff80;
} .table {
margin-top: 50px;
background-color: #f0f0f0;
} .table thead {
height: 50px;
} .table tr td,
.table tr th {
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="top"></div>
<table id="scroll_bar" class="table container" border="1">
<thead>
<tr id="bar_head">
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
<th>表头4</th>
<th>表头5</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>5</td>
<td>3</td>
<td>4</td>
</tr> <tr>
<td>1</td>
<td>2</td>
<td>5</td>
<td>3</td>
<td>4</td>
</tr> <tr>
<td>1</td>
<td>2</td>
<td>5</td>
<td>3</td>
<td>4</td>
</tr> <tr>
<td>1</td>
<td>2</td>
<td>5</td>
<td>3</td>
<td>4</td>
</tr> <tr>
<td>1</td>
<td>2</td>
<td>5</td>
<td>3</td>
<td>4</td>
</tr> <tr>
<td>1</td>
<td>2</td>
<td>5</td>
<td>3</td>
<td>4</td>
</tr> <tr>
<td>1</td>
<td>2</td>
<td>5</td>
<td>3</td>
<td>4</td>
</tr> <tr>
<td>1</td>
<td>2</td>
<td>5</td>
<td>3</td>
<td>4</td>
</tr> <tr>
<td>1</td>
<td>2</td>
<td>5</td>
<td>3</td>
<td>4</td>
</tr> <tr>
<td>1</td>
<td>2</td>
<td>5</td>
<td>3</td>
<td>4</td>
</tr> <tr>
<td>1</td>
<td>2</td>
<td>5</td>
<td>3</td>
<td>4</td>
</tr> <tr>
<td>1</td>
<td>2</td>
<td>5</td>
<td>3</td>
<td>4</td>
</tr> <tr>
<td>1</td>
<td>2</td>
<td>5</td>
<td>3</td>
<td>4</td>
</tr> <tr>
<td>1</td>
<td>2</td>
<td>5</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table> <script>
$(function(){
var scroll_bar = $("#scroll_bar");//表格的id
var bar_head = $("#bar_head");//表头
var bar_height = bar_head.height();//表头高
var sroll_header= scroll_bar.clone().attr('id','bb');//更改复制的表格id
$(window).scroll(function(){
var scroll_top = $('body').scrollTop() - scroll_bar.offset().top;//判断是否到达窗口顶部 if (scroll_top > 0) {
$('body').append('<div id="shelter"></div>');//复制的表格所在的容器
$("#shelter").css({'height':bar_height,'position':'fixed','top':'0','overflow':'hidden','width':'980px','margin': '0 auto','left':'0','right':'0','border-bottom':'1px solid #c8c8c8'});
sroll_header.appendTo('#shelter');
$('#shelter table').removeClass(); //删除table原来有的默认class，防止margin,padding等值影响样式
$('#shelter table').css({'width':'980px','background-color':'#f0f0f0','margin':'0 auto'});
$('#shelter table tr th').css('height', bar_height);//此处可以自行发挥
$('#shelter table tr td').css({'padding':'20px','text-align':'center'}); $('#shelter').show(); }else {
$('#shelter').hide();
}
}); }); </script>
</body>
</html>
网页制作中在头部固定悬浮table表头(thead)的方法的更多相关文章
- bootstrap table 实现固定悬浮table 表头并可以水平滚动
在开发项目中,需要将表格头部固定,而且表格大多数情况下是会水平滚动的.项目的css框架是bootstrap 3,故也可以叫做bootstrap table. 需要实现的是:表格头部固定,并且支持水平滚 ...
- 《SEO在网页制作中的应用》视频笔记
学习了慕课网<SEO在网页制作中的应用>视频,今天将里面的知识整理一下. 一.SEO介绍 1. 搜索引擎工作原理 搜索引擎现在主流有百度.谷歌.360,他们都有庞大的搜索引擎数据库,每个 ...
- 学习网页制作中如何在正确选取和使用 CSS 单位
在 CSS 测量系统中,有好几种单位,如像素.百分比.英寸.厘米等等,Web 开发人员很难了解哪些单位在何处使用,如何使用.很多人习惯了总是使用同一种单位,但这一决定可能会严重限制你的设计的执行. 这 ...
- 四、优化及调试--网站优化--SEO在网页制作中的应用
SEO分类:白帽SEO.黑帽SEO 白帽SEO: 内容上的SEO: 网站标题.关键字.描述 网站内容优化 Robot.txt文件 网站地图 增加外链引用 前端SEO: 网站结构布局优化 扁平化结构(一 ...
- SEO在网页制作中的应用
1.什么是SEOSEO(Search Engine Optimization)中文意译为“搜索引擎优化”.SEO是指通过网站内部调整优化及站外优化,使网站满足搜索引擎收录排名需求,在搜索引擎中提高关键 ...
- 网站优化之-SEO在网页制作中的应用（信息来自慕课网课程笔记）
一.SEO基本介绍. 1.搜索引擎工作原理. 2.seo简介:SEarch Engine Optimization,搜索引擎优化.为了提升网页在搜索引擎自然搜索结果中的收录数量及排序位置而做的优化行为 ...
- 网页制作中规范使用DIV+CSS命名规则，可以改善优化功效特别是团队合作时候可以提供合作制作效率，具体DIV CSS命名规则CSS命名大全内容如下：
页头:header 如:#header{属性:属性值;}或.header{属性:属性值;},也许你需要了解class与id区别及用法登录条:loginBar 标志:logo ...
- 网页制作中最有用的免费Ajax和JavaScript代码库
网上看到的一篇小文,挺有用的,收藏在这. 本文中,我整理了12个免费的Ajax和JavaScript代码库,可以帮助Web开发人员将应用程序提升到一个新水平. Ajax Instant Messeng ...
- table表头thead固定
<html> <head> <meta charset="utf-8"/> <script type="text/javascr ...
随机推荐
- 基于netty轻量的高性能分布式RPC服务框架forest<下篇>
基于netty轻量的高性能分布式RPC服务框架forest<上篇> 文章已经简单介绍了forest的快速入门,本文旨在介绍forest用户指南. 基本介绍 Forest是一套基于java开 ...
- mysql优化（初学）
写的时候遇到了SQL语句的优化问题,在网上搜了一些学习.http://blog.csdn.net/kennyrose/article/details/7532032 索引: 1.可以在这些列上创建索引 ...
- Java笔记：有啥记啥
构造方法可以初始化,也可以在调用的时候传参 1android需要java什么水平 2java封装
- 同一行多个div宽度自适应布局
主要运用到的是:布局神器display:table-cell 元素两端对齐 第一个案例是让两个元素分别向左和向右对齐,如果是过去,我一定会用float来实现,但其实用table可以这么做: 自动平均划 ...
- Android基础学习第一篇—Project目录结构
写在前面的话: 1. 最近在自学Android,也是边看书边写一些Demo,由于知识点越来越多,脑子越来越记不清楚,所以打算写成读书笔记,供以后查看,也算是把自己学到所理解的东西写出来,献丑,如有不对 ...
- 剑指Offer-【面试题03：二维数组中的查找】
package com.cxz.question3; /* * 在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序. * 请完成一个函数,输入这样的一个二维数组和 ...
- rman恢复报ORA-27039
查看资源限制: AIX修改参数文件/etc/security/limits 如下: 重新su到用户下即可生效
- byte[] 转十进制
short s = 0; //一个16位整形变量,初值为 0000 0000 0000 0000 byte b1 = 1; //一个byte的变量,作为转换后的高8位,假设初值为 0000 0001 ...
- DeepLearning——CNN
工具箱下载 https://github.com/rasmusbergpalm/DeepLearnToolbox CNN_demo代码解析 http://blog.csdn.net/zouxy09/a ...
- 在WebStorm环境中给nodejs项目中添加packages
照前文 http://www.cnblogs.com/wtang/articles/4133820.html 给电脑设置了WebStorm的IDE的nodejs开发环境.新建了个express的网站 ...