css列名不动_css3 translate 完美诠释表头固定

效果如下：

感觉是不是很和谐，而且代码也少，不足的是IE9以下不支持transform属性，但现在也没多少要考滤IE9以下的兼容了吧，做前端老兼顾低版本的浏览器难免会让自己束手束脚。。。。

下面来看下代码吧

HTML结构

123456789101112131415

var tr = '';

for(var i=0; i<15; i++) {

tr += '

\'+i+'\'+i+'\'+i+'\'+i+'\'+i+'\'+i+'\'+i+'\'+i+'\'+i+'\'+i+'\'+i+'\'+i+'\'+i+'\'+i+'\'+i+'\';

}

document.write(tr);

CSS样式

*{margin: 0;padding: 0;list-style: none;}

.box{width: 300px;height: 300px;margin: 50px auto 0;overflow: auto;}

.box table{width: 100%;border-collapse: collapse;border-right: 1px solid #ccc;text-align: center;}

.box table thead th{background-color: #ccc;}

.box table th, .box table td{padding: 8px 10px;border-left: 1px solid #ccc;border-bottom: 1px solid #ccc;white-space: nowrap;}

提示：如果是加框表格，建议使用box-shadow: inset 1px 1px 0 0 #ccc;

JS脚本

// 原生写法

window.onload = function() {

var $ = document.querySelector.bind(document);

var boxEle = $('.box');

boxEle.addEventListener('scroll', function(e) {

this.querySelector('thead').style.transform = 'translate(0, '+this.scrollTop+'px)';

});

}

可恶的是IE不支持thead的transform设置，但还是被小可找到了解决的方法，那就是给th设置transform属性

// 需要引用jquery

var scrollTop;

$('.box').scroll(function() {

scrollTop = this.scrollTop;

$(this).find('thead tr th').css({

'-webkit-transform': 'translate(0, '+scrollTop+'px)',

'-ms-transform': 'translate(0, '+scrollTop+'px)',

'transform': 'translate(0, '+scrollTop+'px)'

});

});

另外说明一点，这里的translate(x, y); 可以直接使用translateY(y);

目前来说这个效果在chrome上是最好的，但在遨游，火狐，IE效果就差强人意，有点闪眼，建议做个延迟处理，代码如下

var scrollTop, timeoutFlag;

$('.box').scroll(function() {

$(this).find('thead tr th').removeAttr('style');

if(timeoutFlag) clearTimeout(timeoutFlag);

timeoutFlag = setTimeout(function() {

scrollTop = this.scrollTop;

$(this).find('thead tr th').css({

'-webkit-transform': 'translateY('+scrollTop+'px)',

'-ms-transform': 'translateY('+scrollTop+'px)',

'transform': 'translateY('+scrollTop+'px)'

});

}.bind(this), 300);

});

完整代码

表头固定

*{margin: 0;padding: 0;list-style: none;}

.box{width: 300px;height: 300px;margin: 50px auto 0;overflow: auto;}

.box table{width: 100%;border-collapse: collapse;border-right: 1px solid #ccc;text-align: center;}

.box table thead th{background-color: #ccc;}

.box table th, .box table td{padding: 8px 10px;border-left: 1px solid #ccc;border-bottom: 1px solid #ccc;white-space: nowrap;}

123456789101112131415

var tr = '';

for(var i=0; i<15; i++) {

tr += '

\'+i+'\'+i+'\'+i+'\'+i+'\'+i+'\'+i+'\'+i+'\'+i+'\'+i+'\'+i+'\'+i+'\'+i+'\'+i+'\'+i+'\'+i+'\';

}

document.write(tr);

/*window.onload = function() {

var $ = document.querySelector.bind(document);

var boxEle = $('.box');

boxEle.addEventListener('scroll', function(e) {

this.querySelector('thead').style.transform = 'translate(0, '+this.scrollTop+'px)';

});

}*/

var scrollTop;

$('.box').scroll(function() {

scrollTop = this.scrollTop;

$(this).find('thead tr th').css({

'-webkit-transform': 'translate(0, '+scrollTop+'px)',

'-ms-transform': 'translate(0, '+scrollTop+'px)',

'transform': 'translate(0, '+scrollTop+'px)'

});

});

/*var scrollTop, timeoutFlag;

$('.box').scroll(function() {

$(this).find('thead tr th').removeAttr('style');

if(timeoutFlag) clearTimeout(timeoutFlag);

timeoutFlag = setTimeout(function() {

scrollTop = this.scrollTop;

$(this).find('thead tr th').css({

'-webkit-transform': 'translateY('+scrollTop+'px)',

'-ms-transform': 'translateY('+scrollTop+'px)',

'transform': 'translateY('+scrollTop+'px)'

});

}.bind(this), 300);

});*/

代码是不是真的很少呢，还在等什么？快点感受一下吧。。

如果喜欢就推荐吧，不要问为什么？直接推荐。。

附加本电脑的IE9效果