JQuery - 固定表头与固定的横幅div [英] JQuery - Fixed table headers with a fixed banner div

问题描述

我使用了来自这个问题成功创建固定表头，但是我有一些问题适应我的页面，我不能弄清楚。我有一个新的 javascript / jquery 所以请与我一起。

I have used code from this SO question to successfully create fixed table headers, however I'm having a few issues adapting it to my page that I can't figure out. I'm a little new to javascript/jquery so please bear with me a little.

代码依赖浏览器中的滚动事件来检测
THEAD 何时不在视图中，以便它知道何时克隆表并将克隆的页头置于页面顶部。

但是我的页面有一个 DIV 固定在包含搜索栏等的页面的顶部，当这个时候，固定的标题不工作。我正在努力找到一个方法，因为我需要固定区域。

The code relies on the scroll event in the browser to detect when the THEAD is out of view so that it knows when to clone the table and position the cloned header at the top of the page.
However my page has a DIV fixed at the top of the page that contains a search bar etc and when this is present the fixed header does not work. I'm struggling to find a way around this as I need the fixed area. It's probably really simple but I'm not seeing it.

代码片段如下：

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的页面的缩小版本。

Here's a JSFiddle with a stripped down version of the page.

http://jsfiddle.net/urvfE/

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

If you remove the CSS sections for #topsection and #table-container you'll see the fixed headers in action. When these sections are present nothing works.

另外，我还有另一个问题。如果我在表上使用 border-collapse：collapse 获得漂亮的边框，Firefox不会正确呈现固定标题。它在顶部呈现一个完整的空表。任何想法如何规避这个？

As an aside, I also have one other issue. If I use border-collapse:collapse on the table to get nice borders Firefox doesn't render the fixed header properly. It renders a full empty table over the top instead. Any ideas how to circumvent this?

推荐答案

我回到这个问题周末后解决了。我不能相信我上周看不到这个！它证明了一双新鲜的眼睛能做什么。

我想我会回答这里，以防任何人想要这个代码。

I came back to this problem after the weekend and solved it. I can't believe I couldn't see this last week! It proves what a fresh pair of eyes can do.
I thought I'd answer it here in case anyone else would like this code.

我改变了一个变量来听取主节的顶部，而不是整个窗口：

I changed one of the variables to listen to the top of the main section instead of the whole window:

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

现在是：

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

然后我改变了语句来调用函数：

Then I changed the statement to call the function:

$(window).scroll(moveScroll);

现在是：

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

最后，我手动将固定标题的顶部设置为130px

Lastly I manually set the top of the fixed header to 130px to match the bottom of the topsection.

这里是一个小提琴： http：/ /jsfiddle.net/hvRZy/

我仍然无法解决边框折叠问题

I still can't solve the border-collapse issue though so if anyone has any ideas on that front that'd be amazing. Thanks!

编辑：我已设法解决以下 CSS （也加入圆角）：

I've managed to solve the border issue with the following CSS (also added rounded corners):

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/

这篇关于JQuery - 固定表头与固定的横幅div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！