前两天接到一个项目的二次开发，其中有一个需求iframe中的table有2行表头需要固定，表头还有一些JS事件，table自己也是一个单页。
开始直接对2行表头做定位，固定宽度，结果却不能对齐。网上也找了一些方案并没有适合项目的，于是只能自己动手，丰衣足食。萌生出了一个清奇的想法：
创建一个topTable，把table的2行表头处理过去，用定位覆到table上，然后调一调容器的偏移量，搞定！
image.png
// 原table结构
<table>
<thead>
<tr></tr>
</thead>
<thead>
<tr></tr>
</thead>
</table>
<script type="text/javascript">
// #myTable 为主table
// #topTable 为放置固定表头的table
// 网页加载完成600ms后处理表头，保证表头可以被原JS先行绑定事件
jQuery(window).load(window.setTimeout(function () {
var topa = jQuery('#myTable thead tr').children('th');
for (var i=0;i<topa.length;i++)
{
jQuery(topa[i]).css('width',jQuery(topa[i]).width());
}
// 移动节点(直接clone(true)后JS事件有问题的话可以尝试此写法)
jQuery('#topTable').append(jQuery('#myTable thead'));
jQuery('#myTable').prepend(jQuery('#topTable thead').clone(true));
},600));
// 判断是否为非分帧加载环境
if (self == top) {
jQuery(window).scroll(function() {
if (jQuery(window).scrollTop() > 230) {
// 滚动到表头时，固定定位
jQuery('#topTable').css('position','fixed');
jQuery('#topTable').css('top','0');
}else{
// 回滚时，回落表头
jQuery('#topTable').css('position','absolute');
jQuery('#topTable').css('top','');
}
});
}
</script>
这里用jQuery()是因客户的JS有自己封装的$()，有冲突。
以上仅为关键JS，容器偏移量需要自己调试，跟随窗口大小改变可以自己增加绑定。
