智能浮动表头
2016-06-20 10:01
369 查看
/// <reference path="jquery-1.11.3.js" /> //实现表头智能浮动,容器如果指定则在容器中浮动,不指定则在window中浮动 //要求表格要有thead部份 //调用: //$("#table1").smartFloatTableHeader(document.getElementById('table1').parentNode); $.fn.smartFloatTableHeader = function (container, removebody) { if (!container) container = window; if (typeof (container) == 'string') { container = document.getElementById(container); } var smartFloat = function (element) { var newTable = element.clone(); //复制一个新的表格出来 if (removebody) { newTable.find('tbody').remove(); } else { newTable.find('tbody').hide(); //表体隐藏 } $(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.css({ width: element.outerWidth() }).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)); }); };
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- CSS浮动和定位学习笔记
- 最后一次说说闭包
- Ajax
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- Redux系列02:一个炒鸡简单的react+redux例子
- JavaScript 各种遍历方式详解