Javascript 具有固定标题的水平和垂直滚动内容

我有一个动态宽度的内容div（它会根据窗口的宽度自动调整）。在这个div中，我有两个表，它们比包装器div的视口更宽。因此包装器应该是水平滚动的。div还有一个固定的高度，这意味着所有内容都应该是垂直滚动的！只有标题应保持在顶部，但也应与内容表水平滚动

<div class="wrapper">
    <table width="2000" class="fixed"><tr></tr></table>
    <table width="2000"><tr></tr></table>
</div>

这里有一把小提琴来演示我的问题：

粘性表格标题 演示：

HTML JQuery

var thead=$（'thead'）；
var th=$（'.sticky header'）；
var t=$（‘表’）；
$（文档）。滚动（函数（）{
如果（$（this.scrollTop（）>=thead.offset（）.top&$（this.scrollTop（）

粘性表格标题 演示：

HTML JQuery

var thead=$（'thead'）；
var th=$（'.sticky header'）；
var t=$（‘表’）；
$（文档）。滚动（函数（）{
如果（$（this.scrollTop（）>=thead.offset（）.top&$（this.scrollTop（）

演示：

标题宽度更改：

执行此操作的代码

$（'.mega'）.on（'scroll'，function（）{$（'.header'）.css（'top'，$（this.scrollTop（））；}）

还有

.header{position:absolute; background-color:rgb(202, 202, 202);}

.header+* {margin-top:30px;}

演示：

标题宽度更改：

执行此操作的代码

$（'.mega'）.on（'scroll'，function（）{$（'.header'）.css（'top'，$（this.scrollTop（））；}）

还有

.header{position:absolute; background-color:rgb(202, 202, 202);}

.header+* {margin-top:30px;}

你的意思是当用户向下滚动时，“header”表应该始终保持可见吗？是的，这就是我的意思！它应该可以垂直和水平滚动，但标题应该保持在顶部。只需将
（第1行）向下移动到上方
（第5行），这样标题就不能与内容表一起水平滚动。您的意思是当用户向下滚动时，那么“标题”表应该始终保持可见？是的，这就是我的意思！它应该可以垂直和水平滚动，但标题应该保持在顶部。只需将
（第1行）向下移动到上方
（第5行），这样标题就不能与内容表一起水平滚动。这是一个不错的解决方案，但不幸的是，当第二个“表”中的内容流得更广（例如）时，标题就会中断。。。我想我们可以为列设置固定的宽度？这是因为这两个表是不同的。这就是OP结构。这意味着事件在正常情况下发生，并滚动显示所有本应如此的内容。将此添加到CSS中可以缓解问题，但并不理想。
.mega td{width:25%；}
我选择此结构，因为我认为使用一个表并操纵thead不会奏效。另一个问题是，我有多个具有不同表和单元格编号的视图。但如果这是最好的实现方式，我将不得不扩展我的后端，并为每个视图的每个单元格分配一个特定的宽度。我不需要使用jquery将标题调整为底部单元格的宽度。很好的解决方案，但不幸的是，当第二个“表”中的内容流得更广（例如）时，这会中断。。。我想我们可以为列设置固定的宽度？这是因为这两个表是不同的。这就是OP结构。这意味着事件在正常情况下发生，并滚动显示所有本应如此的内容。将此添加到CSS中可以缓解问题，但并不理想。
.mega td{width:25%；}
我选择此结构，因为我认为使用一个表并操纵thead不会奏效。另一个问题是，我有多个具有不同表和单元格编号的视图。但如果这是最好的实现方式，我将不得不扩展我的后端，并为每个视图的每个单元格分配一个特定的宽度。我不需要使用jquery将标题调整为底部单元格的宽度。效果不错。但是有一个问题。每次你都需要div来点击屏幕的最上方。假设您希望可滚动小部件在不滚动整个页面的情况下滚动。如果每次都不更改代码，这将无法工作。看看：@MuhammadUmer我刚刚注意到，当再次玩代码时。。。谢谢你的评论-我会把这个带回到绘图板上，试着想出一个更灵活和正确的解决方案。效果很好。但是有一个问题。每次你都需要div来点击屏幕的最上方。假设您希望可滚动小部件在不滚动整个页面的情况下滚动。如果每次都不更改代码，这将无法工作。看看：@MuhammadUmer我刚刚注意到，当再次玩代码时。。。谢谢你的评论-我会把这些带回到绘图板上，试着想出一个更灵活、更正确的解决方案
var thead = $('thead');
var th = $('.sticky-header');
var t = $('table');

$(document).scroll(function() {
    if ($(this).scrollTop() >= thead.offset().top && $(this).scrollTop() < t.offset().top + t.height() - th.height())
    {
        th.show();
    } else {
        th.hide();
    }
});

.header{position:absolute; background-color:rgb(202, 202, 202);}

.header+* {margin-top:30px;}