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

请参阅我创建的用于复制我的问题的

在我的项目中，我创建了一个可排序的表。我使用了一个非常简单的jquery插件来实现这一点。JSFIDE中还包括表格分拣机。如果单击表格标题，您会注意到它将表格列从降序排列到升序排列

这很好，我的问题是

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

因此，我的想法是在使用jQuery滚动时修复表头，这几乎可以正常工作。请看我的。我用来将页眉固定到页面顶部的jQuery很有效

问题在于，表格标题变得固定，表格向上移动一行，使其非常容易出错

有谁能帮我消除这个问题，并阻止它在到达窗口顶部时跳过一行

非常感谢您的帮助，谢谢

看到这里了吗

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>

数
名字
姓
系统
1.
约翰
史密斯
Wordpress
... ...

---

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

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

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

不管怎样，请继续使用代码：

$（“#表格分拣机”）.表格分拣机({
小部件：[“斑马”]
});
变量$window=$（window），
$tableHead=$（“.tableHead”），
offset=$tableHead.offset（）；
$window.scroll（函数（）{
if（$window.scrollTop（）>offset.top）{
$tableHead.addClass（'fixed'）；
if（$（“#表格分拣机THAD tr.temp”）.length建议查看-那里使用的jquery插件非常棒。这很聪明。它不是非常平滑，因为你说的样式有点不顺，我似乎无法用css修复。它只差几个像素。真的可以克隆东西吗？如果我可以克隆标题和排序功能，那就太棒了ty成功了。这样会有任何表移动。谢谢你的帮助：-）你必须原谅我，我正在打电话，所以无法给你完整的代码。请参阅这里的jQuery克隆。我想你会想克隆，然后删除并添加一个临时类/id，这将允许你以后删除它：$tableHead.clone（）.removeClass（'fixed'））.addClass（'temp'）；这应该在同一个地方克隆它，并将类更改为temp。使用以前的相同代码删除。正如我所说，我在手机上，所以这没有经过测试，您可能需要稍微更改它，使用我提供给您的链接来帮助。感谢Chris，我也在iPhone上。do将在几个小时后检查这一点并返回。我对javascript和j非常陌生你好，Josh，刚刚用clone试过：我的行有点错误，应该是
$tableHead.clone（）.appendTo（'#table sorter thead'）。removeClass（'fixed'）。addClass（'temp'））
我还将标题文本变大了，这样你就可以看到它可以处理奇数形状的高度等等。太棒了，也很及时。我现在查看一下。谢谢
$("#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();
    }


}); 

$("#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();
    }


});    ​