1

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

在我的项目中，我创建了一个可排序的表。我使用了jquery 表排序器来执行此操作，这是一个非常简单的 jquery 插件。表格排序器也包含在 jsfidde 中。如果单击表格标题，您会注意到它将表格列从降序排序到升序。

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

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

所以我的想法是在使用 jQuery 滚动时修复表头，这几乎可以工作。请看我的小提琴。我用来将标题固定到页面顶部的 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>



4

1 回答 1

3

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

解决方案？嗯，有待商榷。为了证明我的观点，我所做的只是在您修复实际标题时添加一个新的临时标题。这使表格保持在原位并允许标题向下移动。当您向上滚动时，该临时标题将被删除。

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

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


});    ​
于 2012-03-09T16:34:33.407 回答