javascript - 修复表头

Question

我有一个包含很多行和列的表格。垂直滚动时，表头需要固定在浏览器窗口上。我通过在表头到达浏览器窗口顶部时向表头添加样式 position: fixed; 来完成此操作。

但是当我水平滚动时，表格标题不会像我应用固定位置时那样滚动。

如何让表格标题水平滚动(也)。

Javascript:

$(window).scroll(function () {
    var spec_lot_dash_sticky = $('.spec_dash_thead'),
        spec_lot_dash_scroll = $(window).scrollTop();
    if (spec_lot_dash_scroll >= ($("#table_id").offset().top)) {
        spec_lot_dash_sticky.addClass('fixed')
        $(".fixed").css("top", spec_lot_dash_thead_scroll_top)
    } else {
        spec_lot_dash_sticky.removeClass('fixed');
    }

});

jsfiddle link首先滚动垂直条，然后滚动水平滚动条。表头不滚动。

Answer 1

也可以根据表格位置设置滚动时的水平位置:

spec_lot_dash_sticky.css('left', $("#filter_table").offset().left - $(window).scrollLeft());

这是一个fiddle .