Фиксированные заголовки таблицы с фиксированным div баннера

Question

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

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

Фрагмент кода выглядит следующим образом:

function moveScroll() {
    var scroll = $(window).scrollTop();
    var anchor_top = $("#maintable").offset().top;
    var anchor_bottom = $("#bottom_anchor").offset().top;

    if (scroll > anchor_top && scroll < anchor_bottom) {
        clone_table = $("#clone");

        if (clone_table.length === 0) {
            clone_table = $("#maintable").clone();
            clone_table.attr({
                id: "clone"
            }).css({
                position: "fixed",
                "pointer-events": "none",
                top: 0
            }).width($("#maintable").width());

            $("#table-container").append(clone_table);

            $("#clone").width($("#maintable").width());

            $("#clone").css({
                border: "none"
            });

            $("#clone thead").css({
                visibility: "true"
            });

            $("#clone tbody").css({
                visibility: "hidden"
            });

            var footEl = $("#clone tfoot");
            if (footEl.length) {
                footEl.css({
                visibility: "hidden"
            });
        }
    }
    } else {
        $("#clone").remove();
    }
}

$(window).scroll(moveScroll);

Вот JSFiddle с урезанной версией страницы.

http://jsfiddle.net/urvfE/

Если вы удалите разделы CSS для #topsection а также #table-container вы увидите фиксированные заголовки в действии. Когда эти разделы присутствуют, ничего не работает.

Кроме того, у меня есть еще одна проблема. Если я использую border-collapse:collapse чтобы получить хорошие границы, Firefox не отображает фиксированный заголовок должным образом. Вместо этого он отображает полностью пустую таблицу поверх таблицы. Есть идеи как обойти это?

Answer 1

Я вернулся к этой проблеме после выходных и решил ее. Я не могу поверить, что я не мог видеть это на прошлой неделе! Это доказывает, на что способна свежая пара глаз.
Я подумал, что отвечу здесь, если кому-то еще понравится этот код.

Я изменил одну из переменных, чтобы слушать верхнюю часть основного раздела вместо всего окна:

var scroll = $(window).scrollTop();

Сейчас:

var scroll = $('#table-container').offset().top;

Затем я изменил оператор для вызова функции:

$(window).scroll(moveScroll);

Сейчас:

$('#table-container').scroll(moveScroll);

Наконец, я вручную установил верх фиксированного заголовка на 130 пикселей, чтобы он соответствовал низу верхнего раздела.

Вот скрипка: http://jsfiddle.net/hvRZy/

Я до сих пор не могу решить проблему коллапса границы, поэтому, если у кого-то есть какие-то идеи на этом фронте, это было бы удивительно. Спасибо!

РЕДАКТИРОВАТЬ: мне удалось решить проблему границы с помощью следующих CSS (также добавлены закругленные углы):

table {
    border-collapse: separate;
    border-spacing: 0px;
}
table tr th, table tr td {
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    padding: 5px;
}
table tr th:first-child, table tr td:first-child {
    border-left: 1px solid #000;
}
table tr th {
    background: #c0c0c0;
    border-top: 1px solid #000;
    text-align: center;
}
table tr:first-child th:first-child {
    border-top-left-radius: 6px;
}
table tr:first-child th:last-child {
    border-top-right-radius: 6px;
}
table tfoot tr:last-child td:first-child {
    border-bottom-left-radius: 6px;
}
table tfoot tr:last-child td:last-child {
    border-bottom-right-radius: 6px;
}

Последняя скрипка! http://jsfiddle.net/KfxQg/

Answer 2

Вы можете использовать jQuery TH Float Plugin. Если вы хотите сделать table th чтобы исправить, вы можете использовать это так

$("#maintable").thfloat({
  attachment : "#maintable",
  noprint : false
});

FIDDLE