javascript - 滚动数据时如何保持标题固定

Question

我有两个表，第一个用作使用日期选择器的搜索功能，第二个包含 thead 和 tbody，后者包含我的数据的实际标题和行.我尝试关注 http://jsfiddle.net/wLcjh/255/

var tableOffset = $("#table-1").offset().top;
var $header = $("#table-1 > thead");
var $fixedHeader = $("#header-fixed").append($header.clone());
console.log(tableOffset);
console.log($header);
console.log($fixedHeader);
console.log($fixedHeader.is(":hidden"));

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

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

        $.each($header.find('#tr1 > th'), function (ind, val) {
            var original_width = $(val).width();
            $($fixedHeader.find('#tr1 > th')[ind]).width(original_width);
        });
    }

});

但是，它对我的​​页面没有任何影响。甚至有可能完成吗？

Answer 1

如何使用普通 CSS 使用 postion:sticky 来做到这一点？ ？

body { height: 1000px; }
thead tr th{
    background: white;
    position: sticky;
    top: 0;
  }

<table id="table-1">
    <thead id="header-fixed">
        <tr>
            <th >Col1</th>
            <th >Col2</th>
            <th >Col3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>info000000</td>
            <td>info</td>
            <td>info</td>
        </tr>
        <tr>
            <td>info</td>
            <td>infolllllllllllll</td>
            <td>info</td>
        </tr>
        <tr>
            <td>info</td>
            <td>info</td>
            <td>info00000000</td>
        </tr>
    </tbody>
</table>