Проблемы с фиксированным заголовком HTML с использованием jQuery

Question

Я работаю с таблицами HTML, и мне нужно сделать заголовок «застрявшим» в верхней части. Я использую jQuery, чтобы достичь этого, и до сих пор я доволен результатом, кроме некоторых проблем, с которыми я сталкиваюсь.

Я постараюсь хорошо объяснить, что я хотел бы достичь с помощью моего кода, и я также создал скрипку, чтобы лучше объяснить мою просьбу: 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; 
} 

ВОПРОСЫ

1. Заголовок (.headerContainer) правильно перевод, но я не Не хотите, чтобы содержимое таблицы отображалось за заголовком, пока оно является scr olling ... (почему это происходит?)

2. Если я установил ширину и высоту .mainContainer на фиксированный размер (т.е. 500 пикселей/500 пикселей), мой заголовок не переводится правильно (я думаю, что он меня ненавидит ..)

Answer 1

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

1. Вы $(".headerContainer").css("position", "absolute"); подробнее об этом в документации.