介绍 JS是什么 /* *
,,,,*,最重要的一点是头和身体是两个table ,然后定位用relative ,然后通过滚动来计算
,,,*,*/,,,,,function FixedHead () {
,,,,,,,如果(,!(却;能够instanceof FixedHead),) {
,,,,,,,,,return new FixedHead ()
,,,,,,,};
,,,,,,,这个。dom 美元;=,美元(& # 39;.dataTables_scrollHead& # 39;);,//,表头外层dom
,,,,,,,this.offsetTop =,。美元dom.offset直()上,,//,表头外dom层距离顶部的高度
,,,,,,,this.parents =,。美元dom.parents (& # 39; .dataTables_scroll& # 39;);,//,表头外dom层最外面的盒子(包裹着的表盒子)
,,,,,,,this.outBoxHeight =, this.parents.height();,//,表头外dom层最外面的盒子(包裹着的表盒子)的高度
,,,,,,,this.maxHeight =, this.offsetTop +, this.outBoxHeight;,//,滚动的零界点,最多能滚动到哪里
,,,,,,,this.scroll ();
,,,,,}
,,,,,FixedHead.prototype =, {
,,,,,,,构造函数:,FixedHead,
,,,,,,,滚动:,函数(){
,,,,,,,,,var that =,;
,,,,,,,,,美元(窗口).scroll(函数(){
,,,,,,,,,,,var scrollTop =,(这)美元.scrollTop ();
,,,,,,,,,,,如果((scrollTop 祝辞,that.offsetTop),,,, (scrollTop & lt;, that.maxHeight)) {
,,,,,,,,,,,,,,美元dom.css(& # 39;顶部# 39;,,(scrollTop 安康;that.offsetTop +, 50) + & # 39; px # 39;),//,这50个是因为我的头部导航固定在顶部,高是50,所以要加上
,,,,,,,,,,,}else {
,,,,,,,,,,,,,var topCss =,。美元dom.css(& # 39;顶部# 39;);
,,,,,,,,,,,,,如果(topCss ===, & # 39; 0 px # 39;, | |, topCss ===, & # 39;汽车# 39;){
,,,,,,,,,,,,,}else {
,,,,,,,,,,,,,,,,美元dom.css(& # 39;顶部# 39;,,& # 39;0 px # 39;)
,,,,,,,,,,,,,}
,,,,,,,,,,,}
,,,,,,,,,})
,,,,,,,}
,,,,,}
这篇文章将为大家详细讲解有关JS怎么实现表表格固定表头且表头随横向滚动而滚动,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
JS是JavaScript的简称,它是一种直译式的脚本语言,其解释器被称为JavaScript引擎,是浏览器的一部分,主要用于web的开发,可以给网站添加各种各样的动态效果,让网页更加美观。
先看一张效果图
<强>思路:
1,头部用一个表并用一个div包裹着,表格的具体内容用一个表
2,头部外面的div用正电子:相对相对定位
3,获取整个表格的高度
4,获取表格的dom(或者包裹着表格的dom)距离页面顶部的距离offsetTop
5,滚动的零界点的距离表格的高度+表格距离页面顶部的距离如果滚动超过这个就让头部的顶值归0或原封不动
当然还有很多可以优化的地方我只是展示一个小思路嘿嘿嘿
题外话为啥用红色表头因为显眼哇哈哈
<强> JS代码
关于“JS怎么实现表表格固定表头且表头随横向滚动而滚动”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看的到。
