スクロール時にウィンドウの上にテーブルヘッダを修正し、行をジャンプ/スキップします。jQuery.

Question

私の JSfiddle 私は自分の問題を複製するために作成しました。 http://jsfidle.net/motocomdigital/22kfs/3/

私のプロジェクトでは、私はテーブルを作成しました。私は jQuery Table Sorter を使用しました。これは非常に単純なjQueryプラグインです。テーブルソーターはJSFIDDEに含まれています。テーブルヘッダーをクリックすると、テーブル列を降順から昇順に並べ替えます。

これは問題ありません、私が持っている問題は...

私のライブウェブサイトでは、テーブルは約125行のハイです。そして私はすべての費用でテーブルをページングするのを避けたいです。

だから私の考えはjQueryでスクロールするとテーブルヘッダーを修正することでした。私のhref="http:/jsfidle.net/motocomdigital/22kfs/3/" rel="nofollow"> fiddle 。私がヘッダーをページの上部に修理するために使用したjQuery。

問題は、テーブルヘッダが固定されているため、テーブルが行を移動し、非常にグリッチしているためです。

誰もが私がグリッチ性を取り除くのを手伝って、それが窓の上に達するときそれが行をスキップするのをやめることができます。

は本当に助けてくれて感謝します。

ここでのjsfiddle http://jsfidle.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();
    }


});    ​