javascript - 将表头设置为窗口顶部时防止调整表头大小

Question

我在调整网页上的元素大小时遇到​​问题。我已经从一些 json 数据动态创建了一个表。我有一个函数可以在窗口滚动经过时将表格标题固定到页面顶部:

var header = $("#dataheader").offset();

$(window).scroll(function() {
if($(window).scrollTop() > header.top){
    $("#dataheader").css('top','0').css('background-color',white)
} else {
    $('#dataheader').css('position', 'static');
}
});

现在，标题(及其单元格)的 CSS 宽度设置为“自动”。这也意味着当函数将标题附加到窗口顶部时，它会调整标题的大小，使其单元格不再与列对齐。相反，它们变得更短。

有没有办法防止这种情况发生，或者通过从列中获取元素宽度来设置元素宽度？

Answer 1

在static前后添加相同的宽度

var header = $("#dataheader").offset();

$(window).scroll(function() {
if($(window).scrollTop() > header.top){
    $("#dataheader").css('position', 'static').css('top','0').css('width',header.width).css('left',header.left).css('background-color','white');
} else {
    $('#dataheader').css('position', 'relative').css('top','').css('width','100%').css('left','').css('background-color','');
}
});