Исправлен заголовок таблицы в верхней части окна при прокрутке, прыжок / пропуск строки.JQuery - PullRequest
Новая
       49

Исправлен заголовок таблицы в верхней части окна при прокрутке, прыжок / пропуск строки.JQuery

1 голос
/ 09 марта 2012

Пожалуйста, посмотрите мой jsfiddle , который я создал, чтобы повторить мою проблему.http://jsfiddle.net/motocomdigital/22KFS/3/

В моем проекте я создал таблицу, которую можно сортировать.Для этого я использовал сортировщик таблиц jquery , который является очень простым плагином jquery.Сортировщик таблицы также включен в jsfidde.Если щелкнуть заголовки таблицы, вы заметите, что столбцы таблицы сортируются по убыванию к возрастанию.

Это нормально, у меня проблема в том, что ...

На моем действующем веб-сайтеСтол высотой около 125 строк.И я хочу избежать разбивки на таблицы любой ценой.

Так что моя идея заключалась в том, чтобы исправить заголовок таблицы при прокрутке с помощью jQuery, который почти работает.Пожалуйста, смотрите мою скрипку .JQuery, который я использовал для исправления заголовка наверху страниц, работает.

Проблема в том, что заголовок таблицы становится фиксированным, таблица сдвигается вверх на строку и делает ее очень затруднительной.

Может ли кто-нибудь помочь мне убрать глитчесс и прекратить его пропускать строку, когда он достигает верхней части окна.

Был бы очень признателен за любую помощь, спасибо.

См. Здесь jsfiddle 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>

1 Ответ

3 голосов
/ 09 марта 2012

Решил вашу проблему. Если вы этого еще не поняли, причина этого заключается в том, что вы, по сути, удаляете строку заголовка из таблицы, когда устанавливаете ее положение, поэтому остальная часть таблицы поднимается вверх, чтобы заполнить пробел.

Решение? Ну, это для обсуждения. Чтобы доказать свою точку зрения, все, что я сделал, это добавил новый временный заголовок, когда вы исправили фактический заголовок. Это удерживает таблицу на месте и позволяет заголовку двигаться вниз. Когда вы прокручиваете обратно вверх, этот временный заголовок затем удаляется.

Это лучший способ? Не уверен, что вы, возможно, захотите клонировать настоящий заголовок как временное решение, на случай графических сбоев. Это также означало бы, что в случае заголовков с несколькими строками (что приводит к уменьшению высоты), эффект будет сохраняться, поскольку он требует точного клона.

В любом случае, с кодом: 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();
    }


});

Удачи.

EDIT

Вот рабочий продукт с использованием clone () http://jsfiddle.net/chricholson/22KFS/8/

Код: 

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


});    ​
...