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-Information，并用一行代码替换了 Javascript：

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

作品！！！

于 2014-02-28T14:16:16.570 回答