JS实现table表格固定表头且表头随横向滚动而滚动


Posted in Javascript onOctober 26, 2017

先看一张效果图

JS实现table表格固定表头且表头随横向滚动而滚动

思路:

1、头部用一个table并用一个div包裹着, 表格的具体内容用一个table

2、头部外面的div用positon: relative相对定位

3、获取整个表格的高度

4、获取表格的dom(或者包裹着表格的dom)距离页面顶部的距离 offsetTop

5、滚动的零界点的距离 表格的高度+表格距离页面顶部的距离 如果滚动超过这个 就让头部的top值归0或原封不动

JS实现table表格固定表头且表头随横向滚动而滚动

当然还有很多可以优化的地方 我只是展示一个小思路 嘿嘿嘿

题外话 为啥用红色表头 因为显眼哇 哈哈

JS代码

/**
     * 最重要的一点是头和身体是两个table 然后定位用relative 然后通过滚动来计算
     * */
      function FixedHead (){
        if( !(this instanceof FixedHead) ){
          return new FixedHead()
        };
        this.$dom = $('.dataTables_scrollHead'); // 表头外层dom
        this.offsetTop = this.$dom.offset().top; // 表头外层dom距离顶部的高度
        this.parents = this.$dom.parents('.dataTables_scroll'); // 表头外层dom最外面的盒子(包裹着table的盒子)
        this.outBoxHeight = this.parents.height(); // 表头外层dom最外面的盒子(包裹着table的盒子)的高度
        this.maxHeight = this.offsetTop + this.outBoxHeight; // 滚动的零界点 最多能滚动到哪里
        this.scroll();
      }
      FixedHead.prototype = {
        constructor: FixedHead,
        scroll: function(){
          var that = this;
          $(window).scroll(function(){
            var scrollTop = $(this).scrollTop();
            if((scrollTop > that.offsetTop) && (scrollTop < that.maxHeight)){
              that.$dom.css('top', (scrollTop - that.offsetTop + 50)+'px') // 这个50是因为我的头部导航固定在顶部 高是50 所以要加上
            }else {
              var topCss = that.$dom.css('top');
              if(topCss === '0px' || topCss === 'auto'){
              }else {
                that.$dom.css('top', '0px')
              }
            }
          })
        }
      }

总结

以上所述是小编给大家介绍的JS实现table表格固定表头且表头随横向滚动而滚动,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
在网页里看flash的trace数据的js类
Jan 10 Javascript
js获取控件位置以及不同浏览器中的差别介绍
Aug 08 Javascript
javascript实现信息的显示和隐藏如注册页面
Dec 03 Javascript
JS将光标聚焦在文本最后的实现代码
Mar 28 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
Sep 10 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
May 13 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
Nov 28 Javascript
详解vue+vueRouter+webpack的简单实例
Jun 17 Javascript
vue 虚拟dom的patch源码分析
Mar 01 Javascript
javascript使用substring实现的展开与收缩文字功能示例
Jun 17 Javascript
vue自定义switch开关组件,实现样式可自行更改
Nov 01 Javascript
利用js实现简易红绿灯
Oct 15 Javascript
纯JavaScript实现实时反馈系统时间
Oct 26 #Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
Oct 26 #Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
Oct 26 #Javascript
input type=file 选择图片并且实现预览效果的实例
Oct 26 #Javascript
js 只比较时间大小的实例
Oct 26 #Javascript
基于Require.js使用方法(总结)
Oct 26 #Javascript
原生javascript实现文件异步上传的实例讲解
Oct 26 #Javascript
You might like
《破坏领主》销量已超100万 未来将继续开发新内容
2020/03/08 其他游戏
PHP中实现图片的锐化
2006/10/09 PHP
用PHP产生动态的影像图
2006/10/09 PHP
cache_lite试用
2007/02/14 PHP
How do I change MySQL timezone?
2008/03/26 PHP
mysql时区问题
2008/03/26 PHP
php中使用Imagick实现图像直方图的实现代码
2011/08/30 PHP
PHP实现阳历到农历转换的类实例
2015/03/07 PHP
PHP 将数组打乱 shuffle函数的用法及简单实例
2016/06/17 PHP
javascript innerHTML使用分析
2010/12/03 Javascript
基于jquery的loading 加载提示效果实现代码
2011/09/01 Javascript
javascript返回顶部效果(自写代码)
2013/01/06 Javascript
AngularJS的内置过滤器详解
2015/05/14 Javascript
JavaScript数组方法总结分析
2016/05/06 Javascript
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法
2016/05/10 Javascript
使用DataTable插件实现异步加载数据
2017/11/19 Javascript
使用layui 渲染table数据表格的实例代码
2018/08/19 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
2019/01/27 Javascript
jQuery实现可编辑的表格
2019/12/11 jQuery
React中获取数据的3种方法及优缺点
2020/02/18 Javascript
vue中用 async/await 来处理异步操作
2020/07/18 Javascript
Python之reload流程实例代码解析
2018/01/29 Python
python字典快速保存于读取的方法
2018/03/23 Python
python多线程并发让两个LED同时亮的方法
2019/02/18 Python
python函数与方法的区别总结
2019/06/23 Python
实例讲解Python 迭代器与生成器
2020/07/08 Python
中国跨镜手机配件批发在线商店:TVC-Mall
2019/08/20 全球购物
初一地理教学反思
2014/01/16 职场文书
毕业生简历自我评价范文
2014/04/09 职场文书
竞选文艺委员演讲稿
2014/04/28 职场文书
汽车广告策划方案
2014/05/31 职场文书
婚庆公司计划书
2014/09/15 职场文书
党员读书活动心得体会
2016/01/14 职场文书
导游词之安徽醉翁亭
2020/01/10 职场文书
javascript实现计算器功能详解流程
2021/11/01 Javascript
详解Android中的TimePickerView(时间选择器)的用法
2022/04/30 Java/Android