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

我正在尝试集成一种粘性标题技术，如图所示

我已经尝试将它集成到我的代码中，大部分都是成功的，但是它的行为不正确，我真的无法理解

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

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

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

所以我的代码

首先，用于更新标题的函数

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"
        });      
    };
});
}

containerArray=新阵列；
positionArray=新阵列；
floatingheaderray=新数组；
函数updateTableHeaders（）{
$（“.studentContainer”）。每个（函数（i）{
containerArray[i]=美元（本）；
var position=containerArray[i]。position（）；
positionArray[i]=position.top；
var scrollTop=$（“#main”）.scrollTop（）；
浮动头阵列[i]=$（“.floatingHeader”，this）；
如果（（scrollTop>positionArray[i]）&&（scrollTop

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

            $("#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);

$（“#主要内容”）.fadeIn（0）；
loadMessage=“正在加载”+event.target.id的数据；
$.getJSON（'php/oneFullClass.php？techClass='+event.target.id，函数（数据）{
$（“#主标题”）.fadeOut（0）；
$（'#action'）.html（'您是'+actionIntent+'ing'+event.target.id'）；
美元("行动")；
美元("主标题").法代因(300),；
$（'#mainContent'）。追加（'''）
动态定位（）；
$。每个（数据、函数（键、值）{
var thisPosition=positionArray[0]
$（'#mainContent'）。追加(
'' +
''+val.name+''+val.names+'-（'+val.form.substr（0,1）+'/'+val.form.substr（1,2）+'）+
''+val.name+''+val.names+'-（'+val.form.substr（0,1）+'/'+val.form.substr（1,2）+'）+
'目标：'+val.Target+''+
'');
$（“.studentContainer”）.hide（）.each（函数（i）{
//$（此）.slideDown（0）；
$（此）.delay（i*50）.slideDown（300）.fadeIn（500）；
})
//获取此学生以前的评估并生成选项卡
buildTabs（'php/allpreviousassessment.php？sid='+val.idStudent，val.idStudent）；
});
});
$（'mainContent'）。追加（'Expand'）；
$（'mainContent'）。追加（'Collapse'）；
动态定位（）；
$（'expandAll'）.delay（300）.fadeIn（300）；
$（'collapseAll'）.delay（300）。fadeIn（300）；
$（“#main”）.scroll（updateTableHeaders）；

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

我怀疑问题与我在“评估卡”上使用的动画幻灯片的效果有关，该幻灯片与位置值混淆，或者可能与position（）无法获取隐藏元素的位置有关。但是，正如我在每个滚动事件中调用updateTableHeaders（）一样，这不应该是一个问题，因为当您获得对布局的访问权限时，所有动画都已结束（只有在所有AJAX请求完成后，才会出现模式阴影效果）

---

我希望有人能帮我，这件事让我很不开心（

Balloon是我为轻松粘贴标题而编写的库，它非常简单。您只需创建一个Balloon对象实例，指定是否要堆叠或替换粘贴的标题，然后通过传递标题的ID字符串来膨胀标题。请尝试一下，并让我知道它是否有助于您：

---

如果您发现它有任何问题，请在存储库中提交一份错误报告，但我觉得它应该在您的情况下完成它的工作。

感谢这一点，我将在本周试一试，看看它是否有效，从您的演示来看，它似乎确实符合要求。我已经尝试过设置它，公平地说，步骤很少，所以我不知道我能做到什么可能出错，但它不起作用。当我滚动一个新错误多次出现时，随着每次新滚动刷新而增加：

uncaughttypeerror:无法读取null balloon.min.js:1 k.hasClass balloon.min.js:1的属性“className”（匿名函数）balloon.min.js:1 k.每个balloon.min.js:1 d balloon.min.js:1 f balloon.min.js:1 e balloon.min.js:1 scrollView.onscroll

有什么线索吗？你在用什么浏览器？还有：1。）是否在窗口内滚动？如果不是，则在使用document.getElementById或其他东西实例化气球对象时是否传入滚动div的元素