使用Jquery固定表标题时样式发生更改

Question

我想使用Jquery实现一个固定的表头。

请参阅此JSFiddle 。

当用户向下滚动页面时，表格标题将保持固定位置。 我使用以下方式控制固定位置。

$(window).bind("resize.browsersize", function () {
    var topp = $('#header_scrol').offset().top;

    var height = $('#header_scrol').height();

    $(window).scroll(function (event) {

        // what the y position of the scroll is
        var y = $(this).scrollTop();
        console.log('y value is ' + y);
        console.log('topp value is ' + topp);

        // whether that's below the position
        if (y >= topp) {
            // if so, ad the fixed class
            $('#header_scrol').css({
                position: 'fixed',
                top: 0,
                    'background-color': 'gray'
            });

        } else {
            // otherwise remove it
            $('#header_scrol').css({
                position: 'relative',
                top: $(window).height() + 'px'
            });
        }

    });

}).trigger("resize.browsersize");

我现在遇到的问题是向下滚动页面时， 固定的标题样式已更改。 它无法与其他tds对齐。 它变得更短。 请指教！