Question

我正在尝试集成像此处显示的粘贴标头技术...... Persistent Headers。

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

我将尝试简单地解释它正在使用的页面是什么。我有一个包含学生表和另一个评估表的数据库。此页面循环访问JSON对象（通过PHP脚本从数据库中收到），然后为该第一个对象中的每个学生提取另一个JSON及其评估。一切正常。但它会创建一个相当长的页面。在视觉上它看起来像这样......

Code rendered in 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);

我认为这是您需要的所有信息，但我会发布此代码中可能引用的任何其他代码，如果您认为它有助于弄清楚。

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

我希望有人可以提供帮助，这个让我感到不快！：（

Answer 1

Balloon，我为了轻松制作标题而编写的库，非常简单。您只需创建一个Balloon对象实例，指定是否要堆叠或替换粘贴标头，然后通过传入其ID的字符串来扩展标头。尝试一下，让我知道它是否对你有所帮助：

https://github.com/vhiremath4/Balloon

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

使用jQuery和CSS创建多个生成的粘贴标头时遇到问题

1 个答案: