jQuery UI 标签内的 Tablesorter stickyheaders

Question

我运行在 jQuery UI 选项卡小部件中使用 Sticky Headers 插件时出现了一些奇怪的行为。我试图将粘性 header 附加到选项卡内的包装元素，但 header 的定位不正确。它从小部件的顶部开始，并在我滚动 table?

时向下移动

下图说明了这个问题。选择选项卡 "Two" 并滚动 table 时，header 在小部件内垂直移动。

http://jsfiddle.net/gws000/74ja6gdj/5/

<div id="tabs">
    <ul>
        <li><a href="#fragment-1"><span>One</span></a></li>
        <li><a href="#fragment-2"><span>Two</span></a></li>
        <li><a href="#fragment-3"><span>Three</span></a></li>
    </ul>
    <div id="fragment-1">
        <p>First tab is active by default:</p><span>test1</span>
 <pre><code>$( "#tabs" ).tabs(); </code></pre>

    </div>
    <div id="fragment-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        <div id='mywrapper' style='height:200px;overflow-y:scroll;'>
        <table class="tablesorter">
            <thead>
                <tr>
                    <th>AlphaNumeric</th>
                    <th class='filter-select'>Numeric</th>
                    <th>Animals</th>
                    <th>Sites</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>abc 123</td>
                    <td>10</td>
                    <td>Koala</td>
                    <td>http://www.google.com</td>
                </tr>
                <tr>
                    <td>abc 1</td>
                    <td>234</td>
                    <td>Ox</td>
                    <td>http://www.yahoo.com</td>
                </tr>
                <tr>
                    <td>abc 9</td>
                    <td>10</td>
                    <td>Girafee</td>
                    <td>http://www.facebook.com</td>
                </tr>
                <tr>
                    <td>zyx 24</td>
                    <td>767</td>
                    <td>Bison</td>
                    <td>http://www.whitehouse.gov/</td>
                </tr>
                <tr>
                    <td>abc 11</td>
                    <td>3</td>
                    <td>Chimp</td>
                    <td>http://www.ucla.edu/</td>
                </tr>
                <tr>
                    <td>abc 2</td>
                    <td>56</td>
                    <td>Elephant</td>
                    <td>http://www.wikipedia.org/</td>
                </tr>
                <tr>
                    <td>abc 9</td>
                    <td>155</td>
                    <td>Lion</td>
                    <td>http://www.nytimes.com/</td>
                </tr>
                <tr>
                    <td>ABC 10</td>
                    <td>87</td>
                    <td>Zebra</td>
                    <td>http://www.google.com</td>
                </tr>
                <tr>
                    <td>zyx 1</td>
                    <td>999</td>
                    <td>Koala</td>
                    <td>http://www.mit.edu/</td>
                </tr>
                <tr>
                    <td>zyx 12</td>
                    <td>0</td>
                    <td>Llama</td>
                    <td>http://www.nasa.gov/</td>
                </tr>
            </tbody>
        </table>
        </div>
    </div>
    <div id="fragment-3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<span>test3</span>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</div>
$("#tabs").tabs({
    activate: function (event, ui) {
        var $t = ui.newPanel.find('table');
        if ($t.length) {
            if ($t[0].config) {
                $t.trigger('applyWidgets');
            } else {
                $t.tablesorter({
                    theme: 'blue',
                    widgets: ["zebra", "filter", "stickyheaders"],
                    widgetOptions: {
                        stickyHeaders_attachTo: "#mywrapper"
                    }
                });
            }
        }
    }
});

如有任何帮助，我们将不胜感激。

Answer 1

问题似乎是 #mywrapper 元素缺少 position:relative; 定义。粘性 header 使用 position:absolute，因此它最终根据 #tabs 元素计算其位置，这是唯一具有 position:relative 的 parent 元素分配（由 jQuery 选项卡小部件）(updated demo).

<div id='mywrapper' style='height:200px;overflow-y:scroll;position:relative;'>

jQuery UI 标签内的 Tablesorter stickyheaders

Tablesorter stickyheaders inside jQuery UI tabs

tablesorter