jquery - 滚动时将表格标题固定到窗口顶部，跳转/跳过一行。 jQuery

Question

请查看我的jsfiddle我创建是为了复制我的问题。 http://jsfiddle.net/motocomdigital/22KFS/3/

在我的元素中，我创建了一个可排序的表。我用过jquery table sorter要做到这一点，这是一个非常简单的 jquery 插件。表排序器也包含在 jsfidde 中。如果单击表标题，您会注意到它会将表列从降序排序为升序。

这很好，我遇到的问题是......

在我的实时网站上，表格大约有 125 行高。我想不惜一切代价避免对表格进行分页。

所以我的想法是在使用 jQuery 滚动时修复表头，这几乎可以工作。请看我的fiddle 。我用来将标题固定到页面顶部的 jQuery 有效。

问题是因为表格标题变得固定，表格向上移动了一行，并使其非常不稳定。

任何人都可以帮助我消除故障，并阻止它在到达窗口顶部时跳过一行。

非常感谢任何帮助，谢谢。

在这里查看 jsfiddle http://jsfiddle.net/motocomdigital/22KFS/3/

jQuery

var $window     = $(window),
    $tableHead  = $(".table-head"),
    offset      = $tableHead.offset();

$window.scroll(function() {
    if ($window.scrollTop() > offset.top) {
        $tableHead.addClass('fixed');
    } else {
        $tableHead.removeClass('fixed');
    }
});

CSS

.fixed {
   position: fixed;
   top: 0;
}

HTML

<table id="table-sorter" width="400" border="0" cellspacing="0" cellpadding="10">         
    <thead>
            <tr class="table-head">
                <th width="100" height="18" valign="middle">Number</th>
                <th width="100" height="18" valign="middle">First Name</th>
                <th width="100" height="18" valign="middle">Surname</th>
                <th width="100" height="18" valign="middle">System</th>
            </tr>
    </thead>
    <tbody>
            <tr>
                <td>1</td>
                <td>John</td>
                <td>Smith</td>
                <td>Wordpress</td>     
            </tr>

            ... ...

    </tbody>
</table>

Answer 1

解决了您的问题。如果您还没有意识到，它跳跃的原因是因为当您将其位置固定时，您实际上是从表格中删除了标题行，因此表格的其余部分会向上跳跃以填补空白。

解决方案？嗯，这有待辩论。为了证明我的观点，我所做的就是在修复实际 header 时添加一个新的临时 header 。这可以使表格保持在适当的位置并允许标题向下移动。当您向后滚动时，该临时标题就会被删除。

这是最好的方法吗？不确定，您可能想克隆真实的标题作为临时解决方案，以防出现图形故障。这也意味着，如果标题具有多行(因此降低了高度)，效果将保持不变，因为它采用的是精确克隆。

无论如何，请使用代码:http://jsfiddle.net/chricholson/22KFS/5/

$("#table-sorter").tablesorter({
 widgets: ['zebra']
});


var $window     = $(window),
    $tableHead  = $(".table-head"),
    offset      = $tableHead.offset();

$window.scroll(function() {


    if ($window.scrollTop() > offset.top) {
        $tableHead.addClass('fixed');
        if ($('#table-sorter thead tr.temp').length <= 0){
            $('#table-sorter thead').append('<tr class="temp"><td>hello</td></tr>');
        }
    } else {
        $tableHead.removeClass('fixed');
        $('tr.temp').remove();
    }


}); 

​祝你好运。

编辑

这是使用clone()的工作产品 http://jsfiddle.net/chricholson/22KFS/8/

代码:

$("#table-sorter").tablesorter({
     widgets: ['zebra']
});


var $window     = $(window),
    $tableHead  = $(".table-head"),
    offset      = $tableHead.offset();

$window.scroll(function() {


    if ($window.scrollTop() > offset.top) {
        $tableHead.addClass('fixed');
        if ($('#table-sorter thead tr.temp').length <= 0){
            $tableHead.clone().appendTo('#table-sorter thead').removeClass('fixed').addClass('temp');
        }
    } else {
        $tableHead.removeClass('fixed');
        $('tr.temp').remove();
    }


});    ​