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 相关文章推荐
基于jquery DOM写的类似微博发布的效果
Oct 20 Javascript
jQuery之ajax技术的详细介绍
Jun 19 Javascript
为开发者准备的10款最好的jQuery日历插件
Feb 04 Javascript
使用jQuery简单实现模拟浏览器搜索功能
Dec 21 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
Dec 02 Javascript
js原生Ajax的封装和原理详解
Mar 11 Javascript
js实现手机发送验证码功能
Mar 13 Javascript
AngularJS实现表单验证功能详解
Oct 12 Javascript
vue element-ui table表格滚动加载方法
Mar 02 Javascript
Element Input组件分析小结
Oct 11 Javascript
JS实现transform实现扇子效果
Jan 17 Javascript
JS sort方法基于数组对象属性值排序
Jul 10 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
中东人咖啡哲学
2021/03/03 咖啡文化
weiphp微信公众平台授权设置
2016/01/04 PHP
浅谈thinkphp5 instance 的简单实现
2017/07/30 PHP
JS OOP包机制,类创建的方法定义
2009/11/02 Javascript
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
2011/01/08 Javascript
jquery Moblie入门—hello world的示例代码学习
2013/01/08 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
2013/11/19 Javascript
javascript遍历控件实例详细解析
2014/01/10 Javascript
页面装载js及性能分析方法介绍
2014/03/21 Javascript
当达到输入长度时表单自动切换焦点
2014/04/06 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
2015/12/08 Javascript
学习javascript面向对象 javascript实现继承的方式
2016/01/04 Javascript
JavaScript tab选项卡插件实例代码
2016/02/23 Javascript
js提交form表单,并传递参数的实现方法
2016/05/25 Javascript
浅谈JavaScript中小数和大整数的精度丢失
2016/05/31 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
2017/06/29 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
2018/06/14 Javascript
vue-cli 引入jQuery,Bootstrap,popper的方法
2018/09/03 jQuery
javascript中的this作用域详解
2019/07/15 Javascript
ElementUI之Message功能拓展详解
2019/10/18 Javascript
vue 自定义右键样式的实例代码
2019/11/06 Javascript
JavaScript this使用方法图解
2020/02/04 Javascript
[01:25]DOTA2自定义游戏灵园鬼域等你踏足
2015/10/30 DOTA
Python中的多重装饰器
2015/04/11 Python
python的pdb调试命令的命令整理及实例
2017/07/12 Python
详解有关PyCharm安装库失败的问题的解决方法
2020/02/02 Python
python中有帮助函数吗
2020/06/19 Python
HTML5 Canvas中使用用路径描画圆弧
2015/01/01 HTML / CSS
日本网路线上商品代购服务:转送JAPAN
2016/08/05 全球购物
英国女性化妆品收纳和家具网站:Beautify
2019/12/07 全球购物
大学毕业生通用自荐信范文
2013/10/31 职场文书
老同学聚会感言
2014/02/23 职场文书
农村门前三包责任书
2014/07/25 职场文书
2014年村官工作总结
2014/11/24 职场文书
个性发展自我评价2015
2015/03/09 职场文书
初中教师德育工作总结2015
2015/05/12 职场文书