网页制作中在头部固定悬浮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 ...
随机推荐
- AFNetworking 与 gbk 编码格式后台数据的使用
仅针,后台数据为GBK编码时的AFNetWorking 使用情况: 1. Request failed: unacceptable content-type: text/html soluti ...
- UML入门
本文主要讲解uml的一些入门知识. uml:统一建模语言,uml通过图形化的表达对系统进行细致的划分,在开发前期有助于开发人员与开发人员之间交流,同时也能方便用户与开发者之间进行良好的反馈.利用uml ...
- How do I get the path of the current executed file in Python?
First, you need to import from inspect and os from inspect import getsourcefile from os.path import ...
- Total Hamming Distance
The Hamming distance between two integers is the number of positions at which the corresponding bits ...
- dubbox rest服务
1.xml配置: web.xml 定义监听的contextpath,见rest协议定义 <servlet> <servlet-name>dispatcher</servl ...
- iOS 修改状态栏preferredStatusBarStyle不执行问题
一.在老版本的iOS中,状态栏永远都是白色风格.而在iOS 7中,我们可以修改每个view controller中状态栏的外观.通过UIStatusBarStyle常量可以指定状态栏的内容是暗色或亮色 ...
- jquery 替换img 属性
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- Android语录
1. application对象的生命周期是整个程序中最长的,它的生命周期就等于这个程序的生命周期.因为它是全局的单例的,所以在不同的Activity,Service中获得的对象都是同一个对象.因此在 ...
- ［转］金融业容灾技术分析 （终于看到QREP了）
源地址:http://www.cnblogs.com/SuperXJ/p/3480929.html 数据复制技术很多,初步比较如下. 后面重点讨论银行最常用的存储复制和数据库复制..当然,我最推荐的还 ...
- Linux正则表达式
正则表达示的组成: 一般字符:没有特殊意义的字符 特殊字符(meta字符):元字符,有在正则表达式中有特殊意义 正则表达式中常见的meta字符 POSIX BRE与ERE中都有的meta字符 \ 通常 ...