رأس جدول ثابت إلى أعلى النافذة عند التمرير، يقفز / يتخطى صف.jQuery.

Question

يرجى الاطلاع على jsfiddle لقد قمت بإنشائها لتكرار مشكلتي. http://jsfiddle.net/motocomdigital/22kfs/3/

في مشروعي، قمت بإنشاء جدول، وهو قابل للفرز. لقد استخدمت jquery table forter للقيام بذلك وهذا هو البرنامج المساعد مسج بسيط للغاية. يتم تضمين أيضا فارز الطاولة في JSfidde. إذا قمت بالنقر فوق رؤوس الطاولة، فستلاحظ أنه يقوم بفرز أعمدة الجدول من التنازلي إلى تصاعدي.

هذا جيد، والمشكلة التي لديها ...

على موقعي Live على الويب، فإن الجدول حوالي 125 صفوف عالية. وأريد تجنب تصنيف الجدول على جميع التكاليف.

لذلك كانت فكرتي هي إصلاح رأس الجدول عند التمرير باستخدام JQuery، وهو ما يعمل تقريبا. يرجى الاطلاع على بلدي Fiddle . المسج الذي استخدمته لإصلاح الرأس إلى أعلى الصفحات يعمل.

المشكلة هي أن رأس الجدول يصبح ثابتا، ينقل الجدول إلى صف واحد، ويجعله خلل للغاية.

هل يمكن لأي شخص أن يساعدني في إزالة خلية خلية، وتوقف عن تخطي صف عندما يصل إلى الجزء العلوي من النافذة.

سوف نقدر حقا أي مساعدة شكرا.

شاهد JSfiddle هنا http://jsfiddle.net/motocomdigital/22kfs/3/

jquery giveacodicetagpre.

css giveacodicetagpre.

html giveacodicetagpre.

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


});    ​