Question

My ASP.Net application generates an <asp:Table> from the codebehind. What I need is for the header row of that table to slide down the page as the user scrolls past it.

I’ve tried the following approach using JavaScript:

window.onscroll = function () {

    //grab the current scroll position
    var scrollY = document.body.scrollTop;
    if (scrollY == 0) {
        if (window.pageYOffset)
            scrollY = window.pageYOffset;
        else
            scrollY = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;
    }

    //grab the position of the header row I want to slide
    var head = $("tr[name='headerrow']").offset();
    var headtop = head.top;
    var headleft = head.left;

    //if the user has scrolled past the top of the header row
    if (scrollY > headtop) {

        //code correctly reaches this point as alerts show
        //alert('got here');

        //position the header row to the same as the scroll position 
        $("tr[name='headerrow']").offset({ top: scrollY, left: headleft });
    }
}

I can’t get the row to move. There are no error message to be seen on the various browsers developer tools.

Any help would be appreciated.

EDIT: I tried calling the offset() function on the children of the row (i.e. all of the <th> elements) like this:

$("tr[name='headerrow']").children().offset({ top: scrollY, left: headleft });

This now works but of course, they’re all pushed over to the left because I’m using the left value of the header row itself… I’ll keep this updated with my progress but in the meantime any assistance is appreciated as always.

Answer 1

Solution:

Use the children() method on the table row to allow you to change the offset of each of the <th> elements. The left value can be omitted from the offset() method, i.e.

$("tr[name='headerrow']").children().offset({ top: scrollY });