Question

我试图在这个JSFiddle之后实现Sticky Table Headers：http://jsfiddle.net/stFcx/1004/

我更改了代码以初始化'stickyTableHeaders'以应用于相应的表：

$(function(){
    $(".results-table").stickyTableHeaders();
}

HTML

<table class="results-table">
    <thead>
        <tr>
            <th>Info</th>
            <th>Address Info</th>
            <th>Contact</th>
        </tr>
    </thead>
    <tbody>
        <tr class="light-bottom-border">
            <td>
                <table class="permit-table">
                    <tr>
                        <td><strong class="dark-green">#:</strong> </td>
                        <td><strong>12345</strong></td>
                    </tr>
                    <tr>
                        <td><strong class="dark-green">Title:</strong> </td>
                        <td><strong>Project</strong></td>
                    </tr>
                    <tr>
                        <td><strong class="dark-green">Status:</strong> </td>
                        <td><strong>Open (10/12/2013)</strong></td>
                    </tr>
                </table>
            </td>
            <td>
                <table class="address-table">
                    <tr>
                        <td><strong class="dark-green">Address: </strong></td>
                        <td><strong>123 La Brea Ave Gotham CA, 91234</strong></td>
                    </tr>
                    <tr>
                        <td><strong class="dark-green"> #:</strong></td>
                        <td><strong>1234</strong></td>
                    </tr>
                </table>
            </td>
            <td>
                <table class="contact-table">
                    <tr>
                        <td><strong class="dark-green">Name: </strong></td>
                        <td><strong>Johnny Barns</strong></td>
                    </tr>
                    <tr>
                        <td><strong class="dark-green">Title: </strong></td>
                        <td><strong>Owner</strong></td>
                    </tr>
                </table>
            </td>
        </tr>
    </tbody>
</table>

我可以告诉插件有点工作，因为我可以看到隐藏的重复标头。当我滚动时，复制（粘性）标题仍然是隐藏的，因此不起作用。在工作示例中，（粘贴）标题在滚动时删除了“display：none”并隐藏了原始标题。

我没有收到任何错误，所以我不确定我的问题是什么。

您可以在此JSFiddle中查看我的问题：http://jsfiddle.net/m9jj68tk/

Answer 1

基本问题是，您选择的插件会附加到窗口滚动并调整事件大小，而不是最近的可滚动父级。如果你的表包含在任何可滚动元素中（例如JSFiddle＆＃39; s <iframe>），那么滚动元素不会导致插件触发。

试试这个：向下滚动表格的一半，然后调整浏览器窗口的大小。现在，您将看到该插件正在运行。

您有两个选择：使用最近的可滚动父级更新插件（请参阅JSFiddle中的第152行）或选择更好的插件。

我modified your JSFiddle包含JQuery UI并使用scrollParent（）函数查找最近的可滚动父级。看起来它现在正在工作。

粘滞表标题JavaScript无法正常工作

1 个答案: