1

この 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、固定ヘッダーが動作していることがわかります。これらのセクションが存在する場合、何も機能しません。

余談ですが、もう1つ問題があります。テーブルで使用border-collapse:collapseして素敵な境界線を取得すると、Firefox は固定ヘッダーを適切にレンダリングしません。代わりに、完全に空のテーブルを上にレンダリングします。これを回避する方法はありますか？

4

2 に答える 2

1

週末の後にこの問題に戻って解決しました。先週これを見られなかったなんて信じられない！それは、新鮮な目ができることを証明しています。
他の誰かがこのコードを気に入った場合に備えて、ここで答えると思いました。


ウィンドウ全体ではなく、メイン セクションの上部をリッスンするように、変数の 1 つを変更しました。

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

今でしょ：

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


次に、関数を呼び出すようにステートメントを変更しました。

$(window).scroll(moveScroll);

今でしょ：

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


最後に、固定ヘッダーの上部を手動で 130px に設定して、上部セクションの下部に一致させます。

ここにフィドルがあります：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/

于 2013-07-22T09:22:30.457 に答える
0

jQuery TH Float Pluginを使用できます。固定したい場合はtable th、このように使用できます

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

フィドル

于 2013-07-19T13:16:51.913 に答える