0

我想使用 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 对齐。它变得更短。请指教！

4

0 回答 0