Feste Tabellenkopf-Header an der Spitze des Fensters beim Scrollen, springt eine Zeile.jahre

Question

Bitte sehen Sie meine jsfiddle Ich habe erstellt, um mein Problem zu replizieren. http://jsfiddle.net/motocomdigital/22kfs/3/

In meinem Projekt habe ich einen Tisch erstellt, der sortierbar ist. Ich habe den jquery table sorter verwendet, um dies zu tun, was ein sehr einfaches jquery-Plugin ist. Der Tischsortierer ist auch in der JSFIDDE enthalten. Wenn Sie auf die Tabellen-Header klicken, werden Sie feststellen, dass er die Tabellenspalten sortiert, von absteigend bis aufsteigend.

Das ist gut, das Problem, das ich habe ...

Auf meiner Live-Website ist der Tisch etwa 125 Reihen hoch. Und ich möchte vermeiden, den Tisch um jeden Preis zu paginieren.

So war meine Idee, den Tischheader beim Scrollen mit jQuery zu reparieren, der fast funktioniert. Bitte sehen Sie meine fiddle . Der jQuery, den ich verwendet habe, um den Header an der Spitze der Seiten zu reparieren.

Das Problem liegt daran, dass der Tischheader fixiert wird, der Tisch zeigt eine Reihe nach oben und macht es sehr glatt.

Kann mir jemand helfen, den Glitzness zu entfernen, und Stoppen Sie, eine Reihe zu überspringen, wenn er die Oberseite des Fensters erreicht.

würde wirklich helfen, danke.

siehe jsfiddle hier http://jsfiddle.net/motocomdigital/22kfs/3/

jquery generasacodicetagpre.

css generasacodicetagpre.

html generasacodicetagpre.

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


});    ​