HTML - не удается получить заголовок, чтобы оставаться фиксированным при прокрутке

0

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

Я использовал этот код для изменения размера таблицы (они, как правило, HUGE), чтобы соответствовать видимой области:

   var buttonDist = jQuery("#resizableTable").position().top - jQuery("#tglTblScrollLock").position().top;
   document.getElementById('resizableTable').style.width = (visWidth) +'px';
   document.getElementById('resizableTable').style.height = (visHeight * 0.95) - buttonDist - menuOffset +'px';
   document.getElementById('resizableTable').style.display = 'block';

Затем я сделал это (как в ссылке)

        var tableOffset = jQuery("#resizableTable").offset().top;
        var header = jQuery("#resizableTable > thead").clone();
        var fixedHeader = jQuery("#resizableTable").clone()

        fixedHeader.css({'position':'absolute', 'top': jQuery("#resizableTable").position().top, 'display':'none'});
        fixedHeader.attr("id",'fixedHeader');

        jQuery("#tab1").append(fixedHeader);
        jQuery('#fixedHeader > tbody').remove();
        jQuery('#fixedHeader > tfoot').remove();

        jQuery("#resizableTable > thead").bind("scroll", function() {
            var offset = jQuery(this).scrollTop();
            if (offset >= tableOffset && fixedHeader.is(":hidden")) {
                fixedHeader.show();
            }
            else if (offset < tableOffset) {
                fixedHeader.hide();
            }    
        }); 

Вот проблема. jQuery("#resizableTable > thead").bind("scroll", function() { не работает. Он даже не вызывает вызов - если я заменю часть, чтобы проверить прокрутку в window она работает, но не с этим. Что я делаю не так?

1 ответ

1
Лучший ответ

Я сомневаюсь, что вы на самом деле прокручиваете thead, вы, вероятно, прокручиваете в другом месте и, таким образом, поскольку сам элемент thead не имеет внутреннего прокрутки переполнения...

Вставьте jsFiddle, и я проверю эту догадку.

  • 0
    Подождите, тогда что я буду прокручивать? Таблица, которую я изменил ширину и высоту - и я попытался изменить jQuery("#resizableTable > thead") на jQuery("#resizableTable") и это тоже не сработало.
  • 0
    Без jsFiddle для подтверждения, я предполагаю, что на самом деле прокрутка - это тело или родительский контейнер для таблицы с переполнением: scroll или overflow: auto. Помните, что с событием прокрутки оно будет запускать элемент, который является «контейнером», выполняющим прокрутку, а не то, что внутри движется.
Показать ещё 7 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню