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

Question

我有两个表，第一个表用作利用datepicker的搜索功能，第二个表包含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

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

 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> 

Answer 2

您可以申请position: fixed; 标头容器上的CSS可保持位置固定。

请检查以下代码：：

.header-container-fixed {
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 1;
}