將表頭設置為窗口頂部時防止其大小調整

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

靜態前后添加相同的寬度

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','');
}
});