javascript - 如何在滚动页面时保持克隆的表标题

我的Pastebin：http://pastebin.com/pUstKXJz

当滚动超过100像素时，会出现警报，并显示克隆的标题。我如何修改JQuery，以便在向下滚动时将克隆的标头粘贴到页面顶部。

由于它不起作用，目前已被注释掉。

请帮助我解决问题。

这是图片：



输出结果基于以下列出的答案：

最佳答案

您必须将<tr class="showOnlyAfterScroll">..</tr>移动到当前表的外面，并将其包装在实际<table class="tblPrint">..</table>之前的另一个表中，并且还必须将“ showOnlyAfterScroll”类设置为新的<table>标记，而不是<tr>，如下所示：

<!--your new table-->
<table class="tblPrint showOnlyAfterScroll">
    <tbody>
        <tr class="mainTR">...</tr>
    </tbody>
</table>

<!--your current table-->
<table class="tblPrint">
    <tbody>...etc

现在添加以下css：

.showOnlyAfterScroll{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

最后，您必须调整所有五列的宽度％，以使它们在两个表中都相同：

.mainTR > th:nth-child(1){ width: 15%; }
.mainTR > th:nth-child(2){ width: 15%; }
.mainTR > th:nth-child(3){ width: 20%; }
.mainTR > th:nth-child(4){ width: 30%; }
.mainTR > th:nth-child(5){ width: 20%; }

但请确保列的总宽度为100％。

希望这可以帮助！