自己写的一个固定表头JS函数

最新推荐文章于 2021-03-17 11:27:19 发布

大葫芦肚子

最新推荐文章于 2021-03-17 11:27:19 发布

阅读量4.6k

点赞数

分类专栏： HTML 文章标签： header object class null border div

本文链接：https://blog.csdn.net/lanisa/article/details/6269379

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

//用于固定表头
//固定表头使用方法：
/* 1.添加固定表头容器控件divHeader <div id="divHeader" style="position:relative;top:expression(this.offsetParent.scrollTop-82);display:none"></div>
* top:expression(this.offsetParent.scrollTop-82) 数字82是该表头到页面顶部的距离，目前该数值须根据具体情况手动加入
* 2.定义原显示表头如：<ul class="header" id="tbyHeader">
* 要在该表头标签内添加 注释表头，在程序运行时会用到
* 3.做好以上两步以后，只需要在body onscroll事件中加入showFixedHeader事件即可即：<body οnscrοll="showFixedHeader()">
*/
function showFixedHeader(){
var ctrlFixedHeader=$("divHeader");//固定表头的容器控件
var displayedHeader=$("tbyHeader");//原表头控件,即目前默认显示的表头

//如果页面中没有定义固定表头的容器控件，并且也未定义显示表头的控件，则无法固定表头
if(typeof(ctrlFixedHeader)!="object"||ctrlFixedHeader==null) return;
if(typeof(displayedHeader)!="object"||displayedHeader==null) return;

var headerHTML=displayedHeader.innerHTML;

var topLocations=displayedHeader.offsetParent.offsetTop;
var headerHeight=displayedHeader.offsetHeight;

if(ctrlFixedHeader.offsetParent.scrollTop>(topLocations+headerHeight)){
ctrlFixedHeader.style.display="block";
}else{
ctrlFixedHeader.style.display="none";
}

headerHTML='<table id="tbDataListx" width="100%" cellspacing="0" cellpadding="1" frame="hsides" border="1">'+headerHTML+'</table>';

ctrlFixedHeader.innerHTML=headerHTML;
ctrlFixedHeader.style.top=divHeader.offsetParent.scrollTop-SCROLL_HEIGHT;
}