css3固定表头

最新推荐文章于 2024-09-10 17:38:28 发布

gzeehg007

最新推荐文章于 2024-09-10 17:38:28 发布

阅读量252

点赞数

分类专栏： html/css

html/css 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="Scripts/jquery-1.7.js"></script>
<script>
//eleFixed.js代码
(function () {
var eleFixed = {
targets: [],
push: null,
distory: null,
handler: null,
delete: null
}

// push exefixed instance
eleFixed.push = function (option) {
if (typeof option !== 'object') return console.error('eleFixed: push param must be a Object')
if (!option.target && !isElement(option.target)) return console.error('eleFixed: target must be a HTMLElement')
if (!option.offsetTop && typeof option.offsetTop !== 'number') return console.error('eleFixed: param\'s offsetTop must be a Number')

window.eleFixed.targets.push(option)
}

// eleFixed handler eleFixed.targets[i].target为thead时，在IE上无效。IE上可以对tr进行操作
eleFixed.handler = function () {
var offsetTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
for (var i in eleFixed.targets) {
var adjustTop = eleFixed.targets[i].adjustTop;
if (adjustTop == null || adjustTop == undefined) adjustTop = 0;

if (offsetTop > eleFixed.targets[i].offsetTop) {
$(eleFixed.targets[i].target).find("td").css("transform", 'translateY(' + (offsetTop - eleFixed.targets[i].offsetTop - adjustTop) + 'px)');
//固定头移动时触发
if (typeof eleFixed.targets[i].moveFun == "function") {
eleFixed.targets[i].moveFun(eleFixed.targets[i].target);
}
} else {
$(eleFixed.targets[i].target).find("td").css("transform", "translateY(0px)");
//固定头归位时触发
if (typeof eleFixed.targets[i].restoreFun == "function") {
eleFixed.targets[i].restoreFun(eleFixed.targets[i].target);
}
}
}
}

// delete one eleFixed instance
eleFixed.delete = function (target) {
if (target && isElement(target)) {
var targets = window.eleFixed.targets
for (var i in targets) {
if (target.isEqualNode(targets[i].target)) {
target.style.transform = 'translateY(0px)'
targets.splice(i, 1)
break
}
}
}
}

// distory eleFixed in window
eleFixed.distory = function () {
window.removeEventListener('scroll', eleFixed.handler)
for (var i in window.eleFixed.targets) {
window.eleFixed.targets[i].target.style.transform = 'translateY(0px)'
}
window.eleFixed = null
}

// helper
function isElement(value) {
return (
typeof HTMLElement === 'object' ? value instanceof HTMLElement :
value && typeof value === "object" && value !== null && value.nodeType === 1 && typeof value.nodeName === "string"
)
}

// umd expose
if (typeof exports == "object") {
module.exports = eleFixed
} else if (typeof define == "function" && define.amd) {
define(function () { return eleFixed })
} else {
this.eleFixed = eleFixed
}

window.addEventListener('scroll', eleFixed.handler)
})()
</script>
<style>
#tblHeader td {
background: #909090;
border: 1px solid #F00;
}
</style>
</head>
<body>
<div style="height:50px;"></div>
<table id="tblList" border="1">
<thead>
<tr id="tblHeader">
<td>订单号</td>
<td>跟投人</td>
<td>认缴金额</td>
<td>累计到账金额(元)</td>
<td>欠缴金额(元)</td>
<td>使用金额(元)</td>
<td>可用资金(元)</td>
<td>滚投时间</td>
<td>状态</td>
</tr>
</thead>
<tbody id="tblBody"></tbody>
</table>