利用css3 translate完美实现表头固定效果

前端  /  管理员 发布于 7年前   159

前言

前段时间在工作中正好需要这个功能，但是找了很多都不能完美的实现，所以在此就自己做了一个固定表头的方法，主要用到了css3中的translate和一小段js代码，下面来一起看看吧。

效果如下：

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

下面来看下代码吧

HTML

<div class="box">    <table>        <thead><tr>    <th>1</th>    <th>2</th>    <th>3</th>    <th>4</th>    <th>5</th>    <th>6</th>    <th>7</th>    <th>8</th>    <th>9</th>    <th>10</th>    <th>11</th>    <th>12</th>    <th>13</th>    <th>14</th>    <th>15</th></tr>        </thead>        <tbody><script>var tr = '';for(var i=0; i<15; i++) {    tr += '<tr>\<td>'+i+'</td>\<td>'+i+'</td>\<td>'+i+'</td>\<td>'+i+'</td>\<td>'+i+'</td>\<td>'+i+'</td>\<td>'+i+'</td>\<td>'+i+'</td>\<td>'+i+'</td>\<td>'+i+'</td>\<td>'+i+'</td>\<td>'+i+'</td>\<td>'+i+'</td>\<td>'+i+'</td>\<td>'+i+'</td>\        </tr>';}document.write(tr);</script></tbody>    </table></div>

CSS样式

<style>*{ 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;    border-top: 1px solid #ccc;    text-align: center;}.box table thead {    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;}</style>

JS脚本

<script>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)';    });}</script>

总结

好了，以上就是这篇文章的全部内容了，代码是不是真的很少呢，还在等什么？快点感受一下吧。希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。