javascript - 粘性表头 JavaScript 无法正常工作

Question

我正在尝试按照此 JSFiddle 实现粘性表头: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>

我可以看出该插件正在运行，因为我可以看到隐藏的重复 header 。当我滚动时，重复的(粘性)标题仍然隐藏，因此不起作用。在工作示例中，(粘性)标题在滚动时删除了“display:none”，并且隐藏了原始标题。

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

您可以在这个 JSFiddle 中看到我的问题:http://jsfiddle.net/m9jj68tk/

Answer 1

基本问题是您选择的插件附加到窗口的滚动和调整大小事件，而不是最近的可滚动父级。如果您的表格包含在任何可滚动元素中(例如 JSFiddle 的 <iframe> )，则滚动该元素不会导致插件触发。

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

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

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