博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
利用transform实现表头固定
阅读量:6876 次
发布时间:2019-06-26

本文共 6281 字,大约阅读时间需要 20 分钟。

废话不多说,直接上代码:

html:td部分随便贴

name sex age hobby remark
111 female 20 game food
111 female 20 game food
111 female 20 game food
111 female 20 game food
111 female 20 game food
111 female 20 game food
111 female 20 game food
111 female 20 game food
111 female 20 game food
111 female 20 game food
111 female 20 game food
111 female 20 game food
111 female 20 game food
111 female 20 game food
111 female 20 game food
111 female 20 game food
111 female 20 game food
111 female 20 game food
111 female 20 game food
111 female 20 game food
111 female 20 game food
111 female 20 game food
111 female 20 game food
111 female 20 game food
111 female 20 game food
111 female 20 game food
111 female 20 game food
111 female 20 game food
111 female 20 game food
111 female 20 game food
复制代码

css部分:

.wrapper {            width:600px;            height:400px;            border:1px solid red;            margin:100px auto;            overflow:auto;        }        .table {            width:100%;            border:1px solid #ccc;            border-collapse:collapse;            text-align:center;            overflow:auto;        }        .table thead th {            background-color:#ddd;            line-height:40px;            font-size:20px        }        .table tbody tr td{            height:20px;            line-height:20px;            border-bottom:1px solid #c6c6c6;            white-space: nowrap;        }复制代码

js部分:

let scrollTop;        window.onload = function(){        var wrapper = document.getElementById("wrapper");        var th_array = document.getElementsByClassName("th");        wrapper.addEventListener("scroll",function(e){            scrollTop = e.target.scrollTop-1;//为了减少滑动时距离顶部的间隙            th_array = [...th_array];            th_array.forEach(function(ele){                ele.style.transform = `translate(0,${scrollTop}px)`;                ele.style.mozTransform = `translate(0,${scrollTop}px)`;                ele.style.webkitTransform = `translate(0,${scrollTop}px)`;            })        })        }复制代码

最终效果:

转载地址:http://ffgfl.baihongyu.com/

你可能感兴趣的文章
在iOS和Android平台下,jQ.Mobi的性能都要优于其余
查看>>
element-ui 实现table整列的拖动
查看>>
ZendFramework 两种安装方式
查看>>
Linux服务器连接不上的几种解决办法
查看>>
NiFi汉化
查看>>
python入门
查看>>
Flume(一)Flume原理解析
查看>>
python爬虫之基本知识
查看>>
Internet spirit
查看>>
Day004
查看>>
API之子窗口创建 (转)
查看>>
【iOS-iap防护】验证用户付费收据!拒绝iap Cracker!!让iphone越狱用户无从下手!!!...
查看>>
Jquery 遍历 Table;遍历CheckBox ;遍历Select;全选/全不选
查看>>
day14 内置函数二
查看>>
Sequelize-nodejs-2-basic usage
查看>>
XVI Open Cup named after E.V. Pankratiev. GP of Ekaterinburg.
查看>>
iOS-中app启动闪退的原因
查看>>
iOS--高级技术
查看>>
入门·开始使用机器学习
查看>>
【备忘】oc 调用 swift
查看>>