En-tête de table fixe vers le haut de la fenêtre lors du rouleau, saute / saute une rangée.jquyery

Question

S'il vous plaît voir mon jsfiddle J'ai créé pour reproduire mon problème. http://jsfiddle.net/motocomdigital/22kfs/3/

Dans mon projet, j'ai créé une table, qui est trieuse. J'ai utilisé le sortrique de table JQuery pour ce qui est un plug-in très simple de jQuery. La trieuse de table est également incluse dans le JSFIDDE. Si vous cliquez sur les en-têtes de la table, vous remarquerez qu'il trie les colonnes de tableau de descente à Ascending.

C'est bon, le problème que j'ai est ...

sur mon site Web en direct, la table est d'environ 125 rangées élevées. Et je veux éviter de paginer la table à tout prix.

Mon idée était donc de réparer l'en-tête de la table lors du défilement avec JQuery, qui fonctionne presque. S'il vous plaît voir mon Fiddle . La jQuery que j'ai utilisé pour fixer l'en-tête vers le haut des pages fonctionne.

Le problème est dû au fait que l'en-tête de la table devient fixe, la table change de la ligne et le rend très glitchy.

Quelqu'un peut-il m'aider à retirer le problème et arrêtez-le sauter une ligne lorsqu'il atteint le haut de la fenêtre.

apprécierait vraiment toute aide merci.

voir jsfiddle ici 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();
    }


});    ​