0

我正在尝试集成一种像这里显示的那样的粘性标题技术...... Persistent Headers。

我试图将它集成到我的代码中，并且大部分都成功了，但是它的行为不正确，我真的无法弄清楚。

我将尝试简而言之解释它正在使用的页面的作用。我有一个包含学生表和另一个评估表的数据库。此页面循环遍历一个 JSON 对象（通过 PHP 脚本从数据库中接收），然后为第一个对象中的每个学生获取另一个 JSON 及其评估。这一切都很好。然而，它确实创建了一个相当长的页面。视觉上看起来像这样...

在 Chrome 中呈现的代码

我根据上面发布的教程编写的代码应该克隆一个类指定的标题，然后根据涉及元素位置和元素长度的某些逻辑隐藏或显示它们。这具有将页眉粘贴到页面顶部的效果，而它所属的容器仍然可见。

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

所以我的代码...

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

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 请求完成后才会消失完全的。

我希望有人能帮忙，这个让我不开心！:(

4

1 回答 1

0

Balloon 是我为轻松制作标题而编写的一个库，非常轻松。您只需创建一个 Balloon 对象实例，指定是否要堆叠或替换粘性标题，然后通过传入它们的 id 字符串来膨胀标题。试一试，如果它对你有帮助，请告诉我：

https://github.com/vhiremath4/Balloon

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

于 2012-10-24T09:06:06.820 回答