js table 表头动态悬浮固定简单实现

最新推荐文章于 2022-09-05 20:38:34 发布

ZhiMaHuyizhi

最新推荐文章于 2022-09-05 20:38:34 发布

阅读量1.7k

点赞数

文章标签： js javascript

本文链接：https://blog.youkuaiyun.com/ZhiMaHuyizhi/article/details/123878606

版权

当table表单过长时，使用JavaScript实现表头在窗口顶部悬浮，同时表头能跟随横向滚动条同步滑动。通过监听滚动事件，判断滚动距离并复制表头到固定div中，保持格式一致，调整div位置以实现悬浮效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景：

table表单过长过宽，x、y轴都超出了屏幕。下拉表单时，表头距窗口top距离为负时需要将表头悬浮固定在窗口上方，且左右滑动表单时悬浮的表头需要同步滑动

思路：

1、何时悬浮：

获取表头据窗口top的距离L1，获取窗口纵向滚动条下拉的距离L2，若L2 > L1,此时表头悬浮固定。

2、如何悬浮：

因为表格的内容是自由扩展的，所以每一列的列宽是由表头和表内的元素共同决定的，单独把表头拿出来不行，格式会与原表格不一致。最后实现方式：实时监控滚动事件$(window).scroll(function(){}，生成div，复制表单至div，获取表头高度给div，'overflow':'hidden'，其它部分隐藏。

3、如何跟随横向滚动条左右滑动：

实时监控滚动事件$(window).scroll(function(){}，获取横向滚动条距窗口left的距离，赋给表头div 的css样式的position left属性即可。

附上源码：

$(function(){
   var scroll_bar = $("#contentTable");//表格的id
   var bar_head = $("#contentTable thead");//表头
   var bar_height = bar_head.height();//表头高
   var sroll_header= scroll_bar.clone().attr('id','bb');//更改复制的表格id
   $(window).scroll(function(){
      var scroll_top = $(window).scrollTop() - scroll_bar.offset().top;//判断是否到达窗口顶部
      if (scroll_top > 0) {
         $('body').append('<div id="shelter"></div>');//复制的表格所在的容器
         var sl = -Math.max(document.body.scrollLeft, document.documentElement.scrollLeft); // 获取滑动距离
         $("#shelter").css({'height':bar_height + 2,'position':'fixed','top':'0px','left':sl + 'px','overflow':'hidden'});
         sroll_header.appendTo('#shelter');
         $('#shelter').show();

      }else {
         $('#shelter').hide();
      }
   });
});

参考文章：头部固定悬浮table表头(thead)的方法_mingqingyuefeng的博客-优快云博客_table 固定表头