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

解决了你的问题。如果你还没有意识到，它跳转的原因是因为当你将它固定位置时你基本上是从表中删除标题行，所以表的其余部分会跳起来填补空白。

解决方案？好吧，它正在进行辩论。为了证明我的观点，我所做的就是在修复实际标题时添加一个新的临时标题。这使表保持原位并允许标题向下移动。当您向上滚动时，该临时标题将被删除。

这是最好的方法吗？不确定，您可能希望克隆真正的标头作为临时解决方案，以防万一出现图形故障。这也意味着如果标题有多行（因此将高度向下推），效果将保持不变，因为它采取了精确的克隆。

无论如何，使用代码：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(); } });

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

1 个答案: