时间:2021-05-08
前言
前段时间在工作中正好需要这个功能,但是找了很多都不能完美的实现,所以在此就自己做了一个固定表头的方法,主要用到了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>总结
好了,以上就是这篇文章的全部内容了,代码是不是真的很少呢,还在等什么?快点感受一下吧。希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
这是一个利用CSS3的动画属性实现的结合lowpoly(低多边形风格)的效果,主要利用了CSS3transform属性的rotate旋转,translate移动
在学习css3的过程中,发现很多看着炫酷的效果,利用css3的属性能很简单的实现,animation是css3动画效果中常见的属性。下面让我们了解一下如何利用这
复制代码代码如下:css3实现多背景展示 通过css3定位多张背景并且使用固定属性。
目的:利用html5,css实现钟摆效果知识点:1)利用position/left/top和calc()实现元素的水平和垂直居中;2)利用CSS3的animat
本篇文章主要介绍了css3实现文字扫光渐变动画效果的示例,分享给大家,具体如下:利用css3这个属性(背景剪裁):background-clip:border-