Question

I am trying to integrate a sticky headers technique like the one shown here… Persistent Headers.

I have tried to integrate it into my code and for the most part have been successful, however it isn’t behaving correctly and I REALLY can’t figure it out.

I’ll try to explain in a nutshell what the page it is being used on does. I have a database with a table of students and another table of assessments. This page loops through a JSON object (recieved from the database via a PHP script) and then for each student in that first object fetches another JSON with their assessments. This all works fine. It does however create a fairly long page. Visually it looks like this…

Code rendered in Chrome

The code I have written based on that tutorial I posted above is supposed to clone headers specified by a class and then hide or show them based on some logic involving scrollTop the position of the element and the length of the element. This having the effect of the header sticking to the top of the page while the container it belongs to is still visible.

The problem is something is going wrong and although all the headers are shown in sequence they are way too early, they seem to hang about for different lengths of time, and these lengths do seem to correlate to how long the container it belongs to is.

So my code…

Firstly the function used to update the headers…

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

Now the code that generates the containers, headers and tabs.

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

I think that’s all the info you’ll need but I’ll post any other code that may be referenced in this code if you think it’ll help figure it out.

I have a suspicion that the problem is something to do with the animated slide in effect I am using on the ‘assessment cards’ messing with the position values, or possible position()’s inability to get positions of hidden elements. However, as I call updateTableHeaders() with every scroll event, this shouldn’t be an issue as all animation is over by the time you are given access to the layout (there is a modal shade effect that only dissapears once all AJAX requests are complete.

I hope someone can help, this one is making me unhappy! 🙁

Answer 1

Balloon, a library I wrote for easily making your headers stick, is pretty hassle-free. You simply make a Balloon object instance, specifying if you want your sticky headers to be stacked or replaced, and then inflate the headers by passing in the strings of their ids. Give it a try and let me know if it helped you:

https://github.com/vhiremath4/Balloon

If you find any issues with it, file a bug report on the repository, but I feel like it should do its job in your case.