js表头固定实现思路汇总

表头固定，表身滚动的特效，被广泛运用于各种大数据量展示的页面，本人在实践开发过程中总结了3中实现方式，现在，分享给大家。

• 思路一
  　　当发生滚动事件后，动态复制一份表头，将其放置在原表头的位置，为滚动的容器添加scroll事件，时刻保持复制表头的top=滚动条的垂直位置($(obj).scrollTop())
  以下为demo代码实现：

-CSS 实现

<style type="text/css">.table {width:240px;}.table tr >td,.table >thead>tr>th {border:1px solid green;width:50px;}.header-copy{background:red;}#scrollContainer{width:260px;position:fixed;height:200px;overflow-y:auto;}</style

-HEML实现

<div id='scrollContainer'  >    <table class="table" cellspacing=0 cellpadding=0 id="mytab">        <thead >            <tr>                <th>姓名</th><th>爱好</th>            </tr>        </thead>        <tbody>            <tr>                <td>码妞一</td><td>吉他</td>            </tr>        </tbody>    </table></div><!-- 以下的js只是为了批量生成数据，真正固定表头的方法是fixTabHeader --><script type="text/javascript">$(document).ready(function(){    var row=$("#mytab >tbody>tr:first");    for(i=0;i<30;i++){        $('table#mytab > tbody').append(row.clone());     }    fixTabHeader("mytab","scrollContainer"); });</script>

-JS实现

<script language="javascript" type="text/javascript" > function fixTabHeader(tabid,scrollid){        // 获取滚动条容器          var scrollDiv =$("#"+scrollid);            // 将表格拷贝一份          var tb2 =$("#"+tabid).clone(true);              // 将拷贝得到的表格中非表头行删除          if(tb2.size()>0) {            tb2.find("tr:not(:first)").remove();        }            // 创建一个div ,并添加到滚动容器中        var bakDiv =$("<div style='position:absolute;display:none;width:100%;'></div>");        bakDiv.css("top",scrollDiv.scrollTop());        bakDiv.appendTo(scrollDiv);            // 将拷贝得到的表格在删除数据行后添加到创建的div中          tb2.addClass("header-copy");        tb2.appendTo(bakDiv);          scrollDiv.scroll(function(){            // 设置div的top值为滚动条距离滚动条容器顶部的距离值              bakDiv.css({top:$(this).scrollTop()+"px",background:"#e8eaeb",display:"block"});        });    }</script>

• 分析
  　　 以上实现的是基于某个父容器进行滚动的，如果有朋友想要实现基于浏览器进行滚动，只需要将fixTabHeader方法中scrollDiv 申明为当前文档对象就可以了，即scrollDiv=$(window).
  　　此种方法适合比较简单的表格，如果你的表格应用了很多外部样式，比如许多朋友为了效果好实用bootstrap框架做特效，这时候会发现该种方法实现的固头，会有表头的数据行和表内容无法对齐的现象，而且这个问题及其难调，本人花了好几天也没有搞定，如果有看文章的朋友解决了，欢迎和我交流。
• 思路二
  　　实现思路同上面的demo相似，都是复制一份表头来做固定，不同的是上面例子是复制了一份表头直接放置到滚动容器中固定，而本例子是将复制的表头放在了tbody中，然后做固定。位置不同。
• css

table {width:98%;text-align:center;color:blue}table .header{background:green;}table .header-fixed {  position: fixed;}#scrollContainer{height:200px;overflow-y:auto;}

<div id='scrollContainer'  ><table class="table" cellspacing=0 cellpadding=0 id="mytable">    <thead class="header">            <tr>                <th>姓名</th><th>爱好</th>            </tr>    </thead>        <tbody>            <tr>                <td>一介码妞</td><td>吉他</td>            </tr>        </tbody></table></div><!-- 以下的js只是为了批量生成数据，真正固定表头的方法是fixTabHeader --><script type="text/javascript">$(document).ready(function(){    var row=$("#mytable >tbody>tr:first");    for(i=0;i<80;i++){        $('table#mytable > tbody').append(row.clone());     }     $("#mytable").fixedHeader(); });</script>

<script type="text/javascript">(function () {    (function ($) {        return $.fn.fixedHeader = function (options) {            var config;            config = {                bgColor: '#ff82ab'            };            if (options) {                $.extend(config, options);            }            return this.each(function () {                var $head, $parent, headTop, isFixed, o, ww;                processScroll = function () {                    var headTop, i, isFixed, scrollTop, t;                    if (!o.is(':visible')) {                        return;                    }                    i = void 0;                    scrollTop = $parent.scrollTop();                  t= $head.length && $head.offset().top;                    if (!isFixed && headTop !== t) {                        headTop = t;                    }                    if (scrollTop >= headTop && !isFixed) {                        isFixed = 1;                    } else {                        if (scrollTop <= headTop && isFixed) {                            isFixed = 0;                        }                    }                    if (isFixed) {                        return $('thead.header-copy', o).show();                    } else {                        return $('thead.header-copy', o).hide();                    }                };                o = $(this);                $parent=$("#scrollContainer");//$($(this).parent());                $head = $('thead.header', o);                isFixed = 0;                headTop = ($head.length) && ($head.offset().top);                $parent.on('scroll',processScroll);                $head.on('click', function () {                    if (!isFixed) {                        return setTimeout(function () {                            return $parent.scrollTop($head.scrollTop());                        }, 10);                    }                });                $head.clone().removeClass('header').addClass('header-copy header-fixed').appendTo(o);                ww = [];                o.find('thead.header > tr:first > th').each(function (i, h) {                    return ww.push($(h).outerWidth(false));                });                $.each(ww, function (i, w) {                    return o.find('thead.header > tr > th:eq(' + i + '), thead.header-copy > tr > th:eq(' + i + ')').css({ width: w });                });                o.find('thead.header-copy').css({                    margin: '0 auto',                    width: o.outerWidth(),                    top:headTop-2,                    'background-color': config.bgColor                });                return processScroll();            });        };    }(jQuery));}.call(this));</script>

• 分析
  　　demo1 和demo2的思路都是复制一份表头做固定。不同的是demo1有点粗糙直接放到了滚动容器中，做位置固定。而demo2是将它放到了自己table的tbody中。而且demo2还将表格固定的这个例子做成了一个比较通用的插件，方便在其他项目中通用。但是，令人遗憾的是，对于较复杂的例子，demo2也存在表头和表内容无法完全垂直的问题。而且不太好调试。
• 思路三
  　　写两个表格，一个为表头，另一个为表内容。当表内容数据量比较大时，可以直接在表内容所在的父容器进行滚动。以下为demo代码实现：

<table>    <thead class="header">                <tr>                    <th>姓名</th><th>爱好</th>                </tr>    </thead></table><div id='scrollContainer' style="height:300px;overflow-y:auto;" ><table class="table" cellspacing=0 cellpadding=0 id="mytable">        <tbody>            <tr>                <td>一介码妞</td><td>吉他</td>            </tr>        </tbody></table></div><!-- 以下的js只是为了批量生成数据，真正固定表头的方法是fixTabHeader --><script type="text/javascript">$(document).ready(function(){    var row=$("#mytable >tbody>tr:first");    for(i=0;i<80;i++){        $('table#mytable > tbody').append(row.clone());     }     $("#mytable").fixedHeader(); });</script>

<script type="text/javascript">function fixTabHeaderScroll(tabid){    var $parent,$head,pTop,oTop,headTop,o;        o=$("#"+tabid);        oTop=o.height();        $parent=o.parent();        pTop=$parent.height();        $head=$parent.prev();        if (pTop <=oTop) {        $head.css({width:$head.outerWidth(true)-scrollBarWidth+"px"});        }else{            $head.css({width:100+"%"});        }}</script>

• 分析
  　　这种方式应该是最简单，最明了的实现方式，表头和表内容分家，各管各家，对于表头来说，不管表内容滚或者不滚，它都在哪里不离不弃。但是存在一个问题，在表内容没有滚动时，表头和表身是垂直对齐的，一旦表身出现滚动，新出现的滚动条会占用表身的部分宽度，这就导致表身和表头又不对齐。所以，我们需要在给两个表格应用同样样式的基础上，再用js函数控制两个的宽度，使他们宽度一致，大体思路是获取滚动条的宽，然后设置表头的宽度减去滚动条的宽度。
  补充介绍Jquery的几个参数：
  offsetWidth ：当前对象的的宽度包括滚动条在内
  scrollWidth ：当前对象的滚动宽度不包括滚动条在内
  在css的盒子模型中，最内部是content，然后是padding、border、margin
  width=content
  innerWidth = width + padding
  outerWidth = innerWidth + border
  outerWidth(true) = outerWidth + margin
  关于outerWidth属性有一个传入参数可以控制它包不包含外部的margin 为true的话包含，默认不包含。
  注意：要想表格相对于某个父容器做数据滚动，则该父容器必须做如下设置：
  (1)设置固定高度,不设置高度或者用百分比设置高度，滚动不起作用
  (2)设置属性overflow-y:auto
  　必选项，否则当表格数据过多时，不会产生滚动条，而是自动延长该父容器的高度
  (3)设置 position:relative,这个主要是针对前连个例子而言
  　若不设置，拷贝得来的表头将相对于其设置该属性为该值的父节点（或间接父节点）定位，如果没有，则相对于body