Encabezado de mesa fija a la parte superior de la ventana al desplazarse, salta / salta una fila.jQuery

Question

Por favor, consulte mi jsfiddle He creado para replicar mi problema. http://jsfiddle.net/motocomdigital/22kfs/3/

En mi proyecto, he creado una mesa, que es ordenable. He usado el Clasificador de mesa jQuery para hacer esto, que es un complemento jQuery muy simple. El clasificador de la tabla también se incluye en la JSFIDDE. Si hace clic en los encabezados de la tabla, se dará cuenta de que ordena las columnas de la tabla que descienden a ascender.

Esto está bien, el problema que tengo es ...

En mi sitio web en vivo, la tabla es de aproximadamente 125 filas de alto. Y quiero evitar la paginación de la mesa a todos los costos.

Así que mi idea era arreglar el encabezado de la mesa al desplazarse con jQuery, que está trabajando casi. Por favor, vea mi Fiddle . El jQuery que he usado para arreglar el encabezado a la parte superior de las páginas funciona.

El problema es que el encabezado de la tabla se fija, la tabla cambia una fila y lo hace muy glitchy.

¿Puede alguien ayudarme a eliminar la falla y detenerlo saltarse una fila cuando llegue a la parte superior de la ventana?

realmente apreciaría cualquier ayuda gracias.

ver jsfiddle aquí 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();
    }


});    ​