1

画面に収まらないヘッダーがたくさんある HTML テーブルがあります。行数が多いため、垂直方向に完全に機能するスティッキー ヘッダーを使用します。

残念ながら、水平スクロールでも粘着性が維持されます。水平スクロールを許可し、垂直スクロール用に固定ヘッダーを保持するようにコードを変更するにはどうすればよいですか?

テーブル自体は単純明快です。

<table id="calctable">
    <thead class="fixed">
        <tr id="table-head">
            <th><!--Loads of them--></th><th><!--Continues like forever--></th>
        </tr>
    </thead>
    <tbody>
        <tr><td><!--And even more of this kind...--></td></tr>
        <tr><td><!--And even more of this kind...--></td></tr>
    </tbody>
</table>

<table id="header-fixed"></table>

そして私のJavascript（動作しますが...垂直スクロールでのみ）：

$(function() {

            var tableOffset = $("#calctable").offset().top;
            var $header = $("#calctable > thead").clone();
            var $fixedHeader = $("#header-fixed").append($header);

            $(window).bind("scroll", function() {
                var offset = $(this).scrollTop();

                if (offset >= tableOffset && $fixedHeader.is(":hidden")) {
                    $fixedHeader.show();
                }
                else if (offset < tableOffset) {
                    $fixedHeader.hide();
                }
            });

        });

そして私のCSS：

#header-fixed {
    position: fixed;
    top: 0px; display:none;
    background-color:white;
}

ありがとうございました！

4

1 に答える 1

2

Nico OI のおかげで、この問題は数秒で解決できました。

別のJavascriptを追加する必要がありました：

<script src="https://rawgithub.com/mkoryak/floatThead/master/dist/jquery.floatThead.min.js">

上記の (現在は廃止された) CSS 情報を完全に削除し、Javascript を 1 行だけに置き換えました。

       $(function() {                
            $('#calctable').floatThead();
        });

動作します!!!

于 2014-02-28T14:16:16.570 に答える