当页面滚动时，如何保持克隆的表头

Question

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

滚动超过100像素时，会显示一条警报，同时显示克隆的标题。如何修改JQuery，以便在我向下滚动时克隆​​的标题粘在页面顶部。

目前已注释掉，因为它无效。

请帮我解决问题。

这是图片：

输出的内容基于下面列出的答案：

Answer 1

你必须将<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％。

希望这有帮助！