使用jQuery和CSS创建多个生成的粘性头时出现问题

我正在尝试集成像这里所示的粘性头技术。。。持久性标头。

我试着将它集成到我的代码中，在很大程度上是成功的，但它的行为不正确，我真的无法理解。

我将试着简单地解释一下它所使用的页面的作用。我有一个数据库，里面有一张学生表和另一张评估表。该页面循环遍历一个JSON对象（通过PHP脚本从数据库接收），然后为第一个对象中的每个学生获取另一个JSON及其评估。这一切都很好。然而，它确实创建了一个相当长的页面。从视觉上看是这样的。。。

Chrome 中呈现的代码

我根据上面发布的教程编写的代码应该克隆类指定的头，然后根据一些涉及scrollTop元素位置和元素长度的逻辑隐藏或显示它们。这样做的效果是，当它所属的容器仍然可见时，页眉会粘在页面顶部。

问题是出了问题，尽管所有的标题都按顺序显示，但它们似乎太早了，它们似乎停留了不同的时间长度，而且这些长度似乎与它所属的容器的长度相关

所以我的代码。。。

首先是用于更新标题的函数。。。

containerArray =  new Array;
positionArray =  new Array;
floatingHeaderArray =  new Array;
function updateTableHeaders() {
$(".studentContainer").each(function(i) {   
    containerArray[i] = $(this);
    var position = containerArray[i].position();
    positionArray[i] = position.top;
    var scrollTop = $("#main").scrollTop();
    floatingHeaderArray[i] = $(".floatingHeader", this);
    if ((scrollTop > positionArray[i]) && (scrollTop < positionArray[i] + containerArray[i].outerHeight(true))) {
        floatingHeaderArray[i].css({
        "visibility": "visible"
        });
    } else {
        floatingHeaderArray[i].css({
        "visibility": "hidden"
        });      
    };
});
}

现在是生成容器、标头和选项卡的代码。

            $("#mainContent").fadeIn(0);
            loadMessage = "Loading data for " + event.target.id;
            $.getJSON('php/oneFullClass.php?techClass=' + event.target.id, function(data) {
                $('#mainTitle').fadeOut(0);
                $('#action').html('You are ' + actionIntent + 'ing ' + event.target.id);
                $('#action').fadeIn(300);
                $('#mainTitle').fadeIn(300);
                $('#mainContent').append('<div id="scrollTopDisplay"></div>')
                dynamicPositioning();
                $.each(data, function(key, val) {
                    var thisPosition = positionArray[0]
                    $('#mainContent').append(
                    '<div class="studentContainer studentView" id="' + val.idStudent + '">' +
                    '<div class="studentName">' + val.name + ' ' + val.surname + ' - (' + val.form.substr(0, 1) + '/' + val.form.substr(1, 2) + ')</div>' + 
                    '<div class="floatingHeader">' + val.name + ' ' + val.surname + ' - (' + val.form.substr(0, 1) + '/' + val.form.substr(1, 2) + ')</div>' + 
                    '<div class="studentTarget"> Target: <strong>' + val.target + '</strong></div>' +  
                    '</div>');
                    $(".studentContainer").hide().each(function(i) {
                        //$(this).slideDown(0);
                        $(this).delay(i * 50).slideDown(300).fadeIn(500);
                    })
                    //Get previous assessments for this student and build tabs
                    buildTabs('php/allPreviousAssess.php?sid=' + val.idStudent, val.idStudent);
                });
            });
            $('#mainContent').append('<div id="expandAll" onClick="expandAll()">Expand</div>');
            $('#mainContent').append('<div id="collapseAll" onClick="collapseAll()">Collapse</div>');
            dynamicPositioning();
            $('#expandAll').delay(300).fadeIn(300);
            $('#collapseAll').delay(300).fadeIn(300);
           $("#main").scroll(updateTableHeaders);

我想这就是你需要的所有信息，但如果你认为这有助于解决问题，我会发布这段代码中可能引用的任何其他代码。

我怀疑这个问题与我在"评估卡"上使用的动画幻灯片效果混淆了位置值有关，或者可能与position（）无法获取隐藏元素的位置有关。然而，当我对每个滚动事件调用updateTableHeaders（）时，这不应该是一个问题，因为当你被允许访问布局时，所有动画都已经结束了（有一种模式阴影效果，只有在所有AJAX请求完成后才会消失。

我希望有人能帮上忙，这件事让我很不高兴！：（