CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Joe
Joe

Reputation: 1388

HTML -- cannot get header to stay fixed in scrolling

I used the logic from the answer from here to implement the fixed header that should stay while the rest of the table scrolls. I tried a few other plugins but none of them worked properly so I've almost given up at this point.

I used this code to re-size my table (they are usually HUGE) to fit the visible area:

   var buttonDist = jQuery("#resizableTable").position().top - jQuery("#tglTblScrollLock").position().top;
   document.getElementById('resizableTable').style.width = (visWidth) +'px';
   document.getElementById('resizableTable').style.height = (visHeight * 0.95) - buttonDist - menuOffset +'px';
   document.getElementById('resizableTable').style.display = 'block';

Then I did this (like in the link)

        var tableOffset = jQuery("#resizableTable").offset().top;
        var header = jQuery("#resizableTable > thead").clone();
        var fixedHeader = jQuery("#resizableTable").clone()

        fixedHeader.css({'position':'absolute', 'top': jQuery("#resizableTable").position().top, 'display':'none'});
        fixedHeader.attr("id",'fixedHeader');

        jQuery("#tab1").append(fixedHeader);
        jQuery('#fixedHeader > tbody').remove();
        jQuery('#fixedHeader > tfoot').remove();

        jQuery("#resizableTable > thead").bind("scroll", function() {
            var offset = jQuery(this).scrollTop();
            if (offset >= tableOffset && fixedHeader.is(":hidden")) {
                fixedHeader.show();
            }
            else if (offset < tableOffset) {
                fixedHeader.hide();
            }    
        });

Here's an issue. jQuery("#resizableTable > thead").bind("scroll", function() { is not working. It's not even getting called -- if I replace the part to check for scrolling in window it works, but not with that. What am I doing wrong?

Upvotes: 0

Views: 166

Answers (1)

Nick Sharp
Nick Sharp

Reputation: 1891

I doubt you are actually scrolling the thead, you are probably scrolling elsewhere and thus since the thead element itself does not internally have overflow scroll going on...

Paste a jsFiddle and I'll verify that hunch.

Upvotes: 1

Related Questions