//实现表头智能浮动,容器如果指定则在容器中浮动,不指定则在window中浮动 //要求表格要有thead部份 //调用: //$("#table1").smartFloatTableHeader(document.getElementById('table1').parentNode); $.fn.smartFloatTableHeader = function (container) { if (!container) container = window; if (typeof (container) == 'string') { container = document.getElementById(container); } var smartFloat = function (element) { var newTable = element.clone(); //复制一个新的表格出来 newTable.find('tbody').hide(); //表体隐藏 newTable.css({ element.width() }); //设置复制出来的表格与源表格同宽度(某些控件生成的表格未设置宽度) $(newTable).insertBefore(element).hide(); //先不显示复制出来的表格 $(element).parents().scroll(function () { //监控容器及父元素滚动事件 var containerTop = container == window ? 0 : $(container).offset().top, //容器顶部位置 elementTop = element.offset().top, //最少滚动多少才到隐藏位置 scrolls = $(this).scrollTop(), //滚动高度 emementHeight = $(element).outerHeight(), //元素总高度,考虑可能是动态的,每次滚动时判断 offset = $(element).offset(); //源控件位置 //源表头进入隐藏区域并且表尾未进入隐藏区域时显示复制内容 if (containerTop > elementTop && containerTop < elementTop + emementHeight) { newTable.show(); if (window.XMLHttpRequest) { newTable.css({ position: "fixed", top: containerTop, left: offset.left }); } else {//这段针对老式浏览器,未测试 newTable.css({ top: scrolls - containerTop, left: $(element).position().left }); } } else { newTable.hide(); } }); }; return $(this).each(function () { smartFloat($(this)); }); };