javascript - 如何在页面滚动时保持克隆的表头不变

Question

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

当您滚动超过 100 像素时，会出现一个警告，并且还会显示克隆的标题。我如何修改 JQuery，以便在我向下滚动时克隆​​的 header 粘在页面顶部。

它目前已被注释掉，因为它不起作用。

请帮我解决这个问题。

这是图片:

输出是基于下面列出的答案:

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%。

希望这对您有所帮助!