Intestazione del tavolo fisso verso la parte superiore della finestra al momento del rotolo, salta / salta una riga.jquery.

Question

Si prega di consultare il mio jsfiddle ho creato per replicare il mio problema. http://jsfiddle.net/motocomdigital/22kfs/3/

Nel mio progetto, ho creato una tabella, che è ordinabile. Ho usato il jquery table sorter per fare questo che è un plugin jQuery molto semplice. Il table Sorter è anche incluso nel JSFIDDE. Se si fa clic sulle intestazioni della tabella, si noterà di ordinare le colonne della tabella dal decrescente per salire.

Va bene, il problema che ho è ...

Sul mio sito web dal vivo, la tabella è alta circa 125 righe. E voglio evitare di eseguire il cheginando il tavolo a tutti i costi.

Quindi la mia idea era di fissare l'intestazione del tavolo a scorrere con jquery, che sta quasi lavorando. Si prega di consultare il mio Fiddle . La jQuery che ho usato per fissare l'intestazione alla parte superiore delle pagine funziona.

Il problema è perché l'intestazione della tabella si fissa, il tavolo sposta una riga e lo rende molto glitchy.

Qualcuno può aiutarmi a rimuovere il glitchness e smettilo di saltare una riga quando raggiunge la parte superiore della finestra.

apprezzerebbe davvero qualsiasi aiuto grazie.

Vedi Jsfiddle qui 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

Solved your problem. In case you hadn't realised already, the reason it jumps is because you are essentially removing the header row from the table when you make it position fixed, so the rest of the table jumps up to fill the gap.

The solution? Well, it's up for debate. To prove my point, all I've done is add a new temporary header when you make the actual header fixed. This keeps the table in place and allows the header to move down. When you scroll back up, that temporary header then gets removed.

Is this the best way? Not sure, you maybe want to clone the real header as a temporary solution, just in case of graphical glitches. This would also mean that in case of headers with multiple lines (therefore pushing the height down), the effect would be maintained as it's taking an exact clone.

Anyway, on with the code: 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();
    }


}); 

​ Good luck.

EDIT

Here's the working product using clone() http://jsfiddle.net/chricholson/22KFS/8/

Code:

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


});    ​