使用jQuery修復HTML標題的問題

我正在處理HTML表格，並且需要將標題「卡住」到頂部。我正在使用jQuery來實現這一點，我對目前的結果非常滿意，除了我面臨的一些問題。使用jQuery修復HTML標題的問題

我會盡力解釋以及想什麼，我實現我的代碼，我也創建了一個小提琴更好地解釋我的要求：https://jsfiddle.net/Lc0rE/tom1qspq/1/

爲了促進這個問題的閱讀，下面我複製了我的小項目的JS代碼。

在這裏，我們有JS：

// Take the widths of the header 
var headerWidths = []; 

var headerRow = $('thead').children('tr').children('th'); 
$(headerRow).each(function() { 
    headerWidths.push($(this).width()); 
}); 

// Create new div containing the header 
$(".headerContainer").css("position", "absolute"); 
$('thead').clone().appendTo('.headerContainer table').removeClass("headerRow"); 
$(".headerRow").css("visibility", "hidden"); 

// Resizing the columns 
$('.headerContainer thead th').each(function() { 
    var i = $(this).index(); 

    $(this).attr("id", "header" + i); 
    $('#header' + i).css("width", headerWidths[i]); 
}); 

// Scroll event and repositioning 
$(window).scroll(function(event) { 
    var scrollY = $(window).scrollTop(); 
    $('.headerContainer').css('transform', 'translate(0px,' + scrollY + 'px)'); 
});

而CSS：

table { 
    white-space: nowrap; 
    border-collapse: collapse; 
    font-family: "Helvetica"; 
    font-weight: 200; 
    background: white; 
} 

th, 
tr, 
td { 
    border: 1px solid #CCC; 
    padding: 3px; 
} 

thead { 
    position: relative; 
    background: black; 
    color: white; 
} 

.mainContainer { 
    width: auto; 
    height: auto; 
    overflow: auto; 
    position: relative; 
    top: 0; 
} 

.headerContainer { 
    white-space: nowrap; 
    border-collapse: collapse; 
    font-family: "Helvetica"; 
    font-weight: 200; 
} 

.headerContainer thead tr th { 
    display: inline-block; 
    border: 1px solid #ccc; 
}

問題

頁眉（.headerContainer）正確翻譯，但我不不希望表格內容在scr時出現在標題後面olling ...（這是爲什麼發生？）
如果我設置.mainContainer寬度和高度爲固定大小（即500像素/ 500像素），我的頭沒有被正確翻譯（我想他恨我。）

來源

2016-11-27 Lc0rE

// Take the widths of the header 
var headerWidths = []; 

var headerRow = $('thead').children('tr').children('th'); 
$(headerRow).each(function() { 
    headerWidths.push($(this).width()); 
}); 

// Create new div containing the header 
$(".headerContainer").css("position", "absolute"); 
$('thead').clone().appendTo('.headerContainer table').removeClass("headerRow"); 
$(".headerRow").css("visibility", "hidden"); 

// Resizing the columns 
$('.headerContainer thead th').each(function() { 
    var i = $(this).index(); 

    $(this).attr("id", "header" + i); 
    $('#header' + i).css("width", headerWidths[i]); 
}); 

// Scroll event and repositioning 
$(window).scroll(function(event) { 
    var scrollY = $(window).scrollTop(); 
    $('.headerContainer').css('transform', 'translate(0px,' + scrollY + 'px)'); 
}); 
/// you should to use that code IF (500:500) 
// Scroll event and repositioning 
//$(".mainContainer").scroll(function(event) { 
// var scrollY = $(".mainContainer").scrollTop(); 
// $('.headerContainer').css('transform', 'translate(0px,' + scrollY + 'px)'); 
//});

你有$(".headerContainer").css("position", "absolute");瞭解更多關於這文檔。

來源

2016-11-27 21:34:53 Yevhen

使用jQuery修復HTML標題的問題

回答

相關問題