Corrigido o cabeçalho da tabela no topo da janela ao rolar, salta/pula uma linha.jQuery

Question

Por favor veja meu jsfiddle que criei para replicar meu problema. http://jsfiddle.net/motocomdigital/22KFS/3/

No meu projeto, criei uma tabela que pode ser classificada.Eu usei o classificador de tabela jquery para fazer isso, que é um plugin jquery muito simples.O classificador de tabelas também está incluído no jsfidde.Se você clicar nos cabeçalhos da tabela, notará que as colunas da tabela são classificadas de decrescente para crescente.

Tudo bem, o problema que tenho é...

No meu site ativo, a tabela tem cerca de 125 linhas de altura.E quero evitar a todo custo a paginação da tabela.

Então minha ideia era consertar o cabeçalho da tabela ao rolar com jQuery, que está quase funcionando.Por favor veja meu violino.O jQuery que usei para fixar o cabeçalho no topo das páginas funciona.

O problema é porque o cabeçalho da tabela fica fixo, a tabela sobe uma linha e a torna muito problemática.

Alguém pode me ajudar a remover a falha e impedir que ela pule uma linha quando chegar ao topo da janela.

Eu realmente apreciaria qualquer ajuda, obrigado.

Veja jsfiddle aqui 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

Resolvi seu problema.Caso você ainda não tenha percebido, o motivo pelo qual ele salta é porque você está essencialmente removendo a linha do cabeçalho da tabela ao fixá-la na posição, de modo que o restante da tabela salta para preencher a lacuna.

A solução?Bem, está em debate.Para provar meu ponto de vista, tudo o que fiz foi adicionar um novo cabeçalho temporário quando você corrigiu o cabeçalho real.Isso mantém a tabela no lugar e permite que o cabeçalho se mova para baixo.Quando você rola para cima, esse cabeçalho temporário é removido.

É este o melhor caminho?Não tenho certeza, talvez você queira clonar o cabeçalho real como uma solução temporária, apenas no caso de falhas gráficas.Isso também significaria que no caso de cabeçalhos com múltiplas linhas (portanto, empurrando a altura para baixo), o efeito seria mantido, pois está sendo feito um clone exato.

De qualquer forma, vamos ao código: 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();
    }


}); 

Boa sorte.

EDITAR

Aqui está o produto funcional usando clone()http://jsfiddle.net/chricholson/22KFS/8/

Código:

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


});    ​