Javascript 创建随页面滚动的表行（子标题？）

我有一个很长的表格，我需要让副标题与他们的表格部分滚动。我知道有很多函数可以滚动

，但当涉及到让其他行也滚动时，我有点不知所措。基本上，这就是表格的结构

<table>
    <thead>
        <tr>
            <th></th>
            <th>Date</th>
            <th>Date</th>    
            <th>Date</th>
        </tr>
        <tr>
            <th></th>
            <th>Sales</th>
            <th>Qty</th>    
            <th>%</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Location #1</td>
            <td>$0.00</td>
            <td>0.00</td>
            <td>0.00%</td>
        </tr>
        <tr>
            <td></td>
            <td>$0.00</td>
            <td>0.00</td>
            <td>0.00%</td>
        </tr>
        <tr>
            <td></td>
            <td>$0.00</td>
            <td>0.00</td>
            <td>0.00%</td>
        </tr>
        <tr>
            <td></td>
            <td>$0.00</td>
            <td>0.00</td>
            <td>0.00%</td>
        </tr>
        <tr>
            <td></td>
            <td>$0.00</td>
            <td>0.00</td>
            <td>0.00%</td>
        </tr>
        <tr>
            <td></td>
            <td>$0.00</td>
            <td>0.00</td>
            <td>0.00%</td>
        </tr>
        //....undefined number of rows
        <tr>
            <td>Location #2</td>
            <td>$0.00</td>
            <td>0.00</td>
            <td>0.00%</td>
        </tr>
        <tr>
            <td></td>
            <td>$0.00</td>
            <td>0.00</td>
            <td>0.00%</td>
        </tr>
        <tr>
            <td></td>
            <td>$0.00</td>
            <td>0.00</td>
            <td>0.00%</td>
        </tr>
        <tr>
            <td></td>
            <td>$0.00</td>
            <td>$0.00</td>
            <td>$0.00</td>
        </tr>
        <tr>
            <td></td>
            <td>$0.00</td>
            <td>0.00</td>
            <td>0.00%</td>
        </tr>
        <tr>
            <td></td>
            <td>$0.00</td>
            <td>0.00</td>
            <td>0.00%</td>
        </tr>
        //...and so on, there can be an undefined number of groupings like this
    </tbody>
</table>

日期
日期
日期
销售额
数量
%
位置#1
$0.00
0
0.00%
$0.00
0
0.00%
$0.00
0
0.00%
$0.00
0
0.00%
$0.00
0
0.00%
$0.00
0
0.00%
//..未定义的行数
位置#2
$0.00
0
0.00%
$0.00
0
0.00%
$0.00
0
0.00%
$0.00
$0.00
$0.00
$0.00
0
0.00%
$0.00
0
0.00%
//…以此类推，可以有这样数量的未定义分组

因此，我需要线程中的两行来向下滚动整个表的页面，以及带有“Location”的行来向下滚动页面，直到它到达一个新的“Location”，然后它需要切换到滚动该行

---

编辑：我不认为这是一个重复的链接问题。所有这些都只处理页面滚动时的标题，我需要“副标题”（表格中的行）滚动到下一个副标题，以此类推，滚动次数未定义。

好的，所以我编写了一些代码，完全满足您的要求，但还远未完成。代码解释在最后。下面是：

我所做的很简单

测量滚动的总距离

检查滚动距离是否在视口中保持

thead

或

tr

如果是，则应用css移动它

否则，应用充当极值的css-视口位于元素上方或下方

希望能有帮助

PS：我知道我应该为它做一把小提琴，我确实试过了，但我无法让它工作。如果有人能编出这段代码，我将非常感激

var表=$（“#数据#表”）；
var head=$（“#数据#表thead”）；
var head_top=head.offset（）.top；
var行=$（“#数据_表tbody tr”）；
var row_tops=[]；
对于（变量i=0；itable.height（））{
偏移量=表格高度（）；
}否则{
偏移量=滚动-头部\顶部；
};
css（“transform”、“translateY”（+offset+“px”）；
对于（变量i=0；i行[6*i]。远视*6）{
偏移量=行[6*i]。偏移量*6；
}否则{
偏移量=滚动-行顶部[i]；
};
行[6*i].style.transform=“translateY”（+（偏移量）+“px）”；
}
};
$（窗口）。滚动（滚动条）
表格{
边框：2个实心#ccc；
位置：相对位置；
填充顶部：60px；
垫底：0px；
}
泰德{
位置：绝对位置；
排名：0；
宽度：100%；
高度：60px；
背景：#234；
颜色：白色；
转换：转换100毫秒缓解；
z指数：1；
}
thead th{
边框底部：1px实心#fff；
宽度：100%；
}
tbody tr{
背景：白色；
转换：转换100毫秒缓解；
}








有很多br元素，只是为了检查滚动效果
滚动一点后可以看到主表










































日期
日期
日期
销售额
数量
%
位置#1
$0.00
0
0.00%
$0.00
0
0.00%
$0.00
0
0.00%
$0.00
0
0.00%
$0.00
0
0.00%
$0.00
0
0.00%
位置#2
$0.00
0
0.00%
$0.00
0
0.00%
$0.00
0
0.00%
$0.00
0
0.00%
$0.00
0
0.00%
$0.00
0
0.00%
地点#3
$0.00
0
0.00%
$0.00
0
0.00%
$0.00
0
0.00%
$0.00
0
0.00%
$0.00
0
0.00%
$0.00
0
0.00%
地点#4
$0.00