这两天接了一个需求，页面是这样的

然后需求是页面中的这个表格当页面向上滚动，且表格的表头到达窗口上方时，表头悬浮在页面的上方，表格正常滚动，这样表格内的数据可以随时看到表头内容。

一开始我认为这是极简单的，就当页面滚动，判断表头到窗口的距离，当=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)的方法的更多相关文章

  1. bootstrap table 实现固定悬浮table 表头并可以水平滚动

    在开发项目中,需要将表格头部固定,而且表格大多数情况下是会水平滚动的.项目的css框架是bootstrap 3,故也可以叫做bootstrap table. 需要实现的是:表格头部固定,并且支持水平滚 ...

  2. 《SEO在网页制作中的应用》视频笔记

    学习了慕课网<SEO在网页制作中的应用>视频,今天将里面的知识整理一下. 一.SEO介绍 1.  搜索引擎工作原理 搜索引擎现在主流有百度.谷歌.360,他们都有庞大的搜索引擎数据库,每个 ...

  3. 学习网页制作中如何在正确选取和使用 CSS 单位

    在 CSS 测量系统中,有好几种单位,如像素.百分比.英寸.厘米等等,Web 开发人员很难了解哪些单位在何处使用,如何使用.很多人习惯了总是使用同一种单位,但这一决定可能会严重限制你的设计的执行. 这 ...

  4. 四、优化及调试--网站优化--SEO在网页制作中的应用

    SEO分类:白帽SEO.黑帽SEO 白帽SEO: 内容上的SEO: 网站标题.关键字.描述 网站内容优化 Robot.txt文件 网站地图 增加外链引用 前端SEO: 网站结构布局优化 扁平化结构(一 ...

  5. SEO在网页制作中的应用

    1.什么是SEOSEO(Search Engine Optimization)中文意译为“搜索引擎优化”.SEO是指通过网站内部调整优化及站外优化,使网站满足搜索引擎收录排名需求,在搜索引擎中提高关键 ...

  6. 网站优化之-SEO在网页制作中的应用（信息来自慕课网课程笔记）

    一.SEO基本介绍. 1.搜索引擎工作原理. 2.seo简介:SEarch Engine Optimization,搜索引擎优化.为了提升网页在搜索引擎自然搜索结果中的收录数量及排序位置而做的优化行为 ...

  7. 网页制作中规范使用DIV+CSS命名规则，可以改善优化功效特别是团队合作时候可以提供合作制作效率，具体DIV CSS命名规则CSS命名大全内容如下：

    页头:header  如:#header{属性:属性值;}或.header{属性:属性值;},也许你需要了解class与id区别及用法登录条:loginBar         标志:logo      ...

  8. 网页制作中最有用的免费Ajax和JavaScript代码库

    网上看到的一篇小文,挺有用的,收藏在这. 本文中,我整理了12个免费的Ajax和JavaScript代码库,可以帮助Web开发人员将应用程序提升到一个新水平. Ajax Instant Messeng ...

  9. table表头thead固定

    <html> <head> <meta charset="utf-8"/> <script type="text/javascr ...

随机推荐

  1. （转）高效的将excel导入sqlserver中

    大部分人都知道用oledb来读取数据到dataset,但是读取之后怎么处理dataset就千奇百怪了.很多人通过循环来拼接sql,这样做不但容易出错而且效率低下,System.Data.SqlClie ...

  2. Repeater、地址栏传值、Response--2016年12月30日

    Repeater  Repeater支持以下5种模板       ● ItemTemplate : 对每一个数据项进行格式设置 [Formats each item from the data sou ...

  3. liniux mint android-ndk风波

    我的安装过程sudo chmod a+x android-ndk-r10d-linux-x86_64.bin/dowonload $ ./android-ndk-r10d-linux-x86_64.b ...

  4. css文件 引用后不起作用

    你如果填写的是相对路径,那么检查一下路径是否正确. 如果相对路径正确,那么有可能你的css样式的层级错误(概率也不低),比如说图片的引用路径发生了改变等等. 要看你预览的浏览器是什么,我经常遇到IE预 ...

  5. Java 基础高级2 网络编程

    1.协议的概念:通信双方事先约定好的通信规则 2七层网络通信协议:应用成,表示层,会话层,传输层,网络层,数据链路层 3.TCP/IP协议:点对点通信,三层握手,安全有保证 4.UDP协议;广播协议, ...

  6. [原创]Windows Server 2003 物理机转换为VMware虚拟机出现VSS错误的处理

    一台Windows Server 2003 物理机需要转换为VMware虚拟机,工具为Vmware vCenter Converter Standalone 6.0,转换开始就出现错误“FAILED: ...

  7. 使用java读取文件夹中文件的行数

    使用java统计某文件夹下所有文件的行数 经理突然交代一个任务:要求统计某个文件夹下所有文件的行数.在网上查了一个多小时没有解决.后来心里不爽就决定自己写一个java类用来统计文件的行数,于是花了两个 ...

  8. 忘记mysq rootl密码

    忘记mysq rootl密码 1       mysql忘记root密码 1.1     查看mysql的进程 [root@mysql data]# cat /data/mysql.localdoma ...

  9. C and SQL data types for ODBC and CLI

    C and SQL data types for ODBC and CLI   This topic lists the C and SQL data types for ODBC and CLI a ...

  10. oracle去除重复字段

    ) 代码摘自百度.