jquery - 带有固定横幅 div 的固定表头

Question

我使用了来自 this SO question 的代码成功创建固定的表头，但是我在将它适应我的页面时遇到了一些我无法弄清楚的问题。我对 Javascript/jQuery 有点陌生，所以请多多包涵。

代码依赖于浏览器中的滚动事件来检测何时THEAD 在 View 之外，因此它知道何时克隆表格并将克隆的标题放在页面顶部。
但是我的页面有一个 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/

如果您删除 #topsection 和 #table-container 的 CSS 部分，您将看到固定的标题。当这些部分存在时，没有任何作用。

顺便说一句，我还有一个问题。如果我在表格上使用 border-collapse:collapse 来获得漂亮的边框，Firefox 不会正确呈现固定 header 。它在顶部呈现一个完整的空表。有什么办法可以避免这种情况吗？

Answer 1

周末过后我又回来解决了这个问题。我不敢相信我上周看不到这个!它证明了一双新鲜的眼睛可以做什么。
我想我会在这里回答，以防其他人想要这段代码。

我更改了其中一个变量以收听主要部分的顶部而不是整个窗口:

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

现在是:

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

然后我更改了调用函数的语句:

$(window).scroll(moveScroll);

现在是:

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

最后，我手动将固定标题的顶部设置为 130px 以匹配顶部部分的底部。

这是一个 fiddle :http://jsfiddle.net/hvRZy/

我仍然无法解决边界崩溃问题，所以如果有人在这方面有任何想法，那就太棒了。谢谢!

编辑: 我已经设法使用以下 CSS 解决了边框问题(还添加了圆 Angular ):

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

最后一个 fiddle ! http://jsfiddle.net/KfxQg/