粘性表格标题 JavaScript 无法正常工作

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 的 <iframe>），则滚动元素不会导致插件触发。

试试这个：将表格向下滚动到一半，然后调整浏览器窗口的大小。现在你会看到插件工作了。

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

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