Я использовал логику из ответа отсюда, чтобы реализовать фиксированный заголовок, который должен оставаться в то время, пока остальная часть таблицы прокручивается. Я пробовал несколько других плагинов, но ни один из них не работал должным образом, поэтому я чуть не сдался в этот момент.
Я использовал этот код для изменения размера таблицы (они, как правило, 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
она работает, но не с этим. Что я делаю не так?
Я сомневаюсь, что вы на самом деле прокручиваете thead, вы, вероятно, прокручиваете в другом месте и, таким образом, поскольку сам элемент thead не имеет внутреннего прокрутки переполнения...
Вставьте jsFiddle, и я проверю эту догадку.
jQuery("#resizableTable > thead")
наjQuery("#resizableTable")
и это тоже не сработало.