스크롤시 창 꼭대기에 고정 된 테이블 헤더, 점프 / 행을 건너 뜁니다.jquery.

Question

내 JSFiddle jsfiddle jsfiddle 내 문제를 복제하도록 만들었습니다. http://jsfiddle.net/motocomdigital/22kfs/3/

내 프로젝트에서는 SURTABLE 테이블을 만들었습니다. "Nofollow"> jQuery Table Sorter 이는 매우 간단한 jQuery 플러그인입니다. 테이블 분류기는 JSFIDDE에도 포함되어 있습니다. 테이블 헤더를 클릭하면 테이블 열을 내림차순으로 정렬하는 것이 좋습니다.

이것은 괜찮습니다, 내가 가진 문제는 ...

내 라이브 웹 사이트 에서이 테이블은 약 125 행이 높습니다. 그리고 나는 모든 비용으로 테이블을 꾸미는 것을 피하고 싶습니다.

이 아이디어는 거의 작동하는 jQuery로 스크롤 할 때 테이블 헤더를 수정하는 것이 었습니다. 내 바이올린 를 참조하십시오. 머리글을 페이지 작업의 맨 위에 수정하는 데 사용한 jQuery입니다.

테이블 헤더가 고정되기 때문에 테이블이 행을 이동하고 매우 글리치를 만듭니다.

누구든지 방해를 제거하고 창 꼭대기에 도달하면 행을 건너 뛰는 것을 멈출 수 있습니다.

에는 정말로 도움이 필요합니다.

여기를 참조하십시오 http://jsfiddle.net/motocomdigital/22kfs/3//A>

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


});    ​