Header showing in middle of screen in Chrome browsers [fix included]

[ghming]

Great plugin, thanks for uploading. Just one thing, in this version (0.1.19) the sticky table header shows up somewhere in the middle instead of at the very top in my Chrome browser. IE and Firefox are fine.

To fix this Chrome-exclusive issue, add 'top': 0, after 'margin-top': base.options.marginTop, in source code.

[gregveres]

Hi @ghming

I was getting the same issue. I put in your change and it seemed to fix the issue, but on chrome for windows I am getting the header flickering now as I scroll. Are you seeing that?

Thanks
Greg

[gregveres]

@ghming, I figured out what was causing the flickering. I am using an fixedOffset, so 0 is not the correct value to set top to, instead it should be set to base.options.fixedOffset. You are correct that it fixes the issue where the headers will show up part way down the screen, so I am going continue running with the change. Thank you for pointing it out.

And to be a little more specific about where this code goes, ti is in toggleHeaders. Change this:

base.$originalHeader.css({
    'position': 'fixed',
    'margin-top': base.options.marginTop,
    'left': newLeft,
    'z-index': 3 // #18: opacity bug
});

to this

base.$originalHeader.css({
    'position': 'fixed',
    'margin-top': base.options.marginTop,
    'top': base.options.fixedOffset,
    'left': newLeft,
    'z-index': 3 // #18: opacity bug
});

Now if I could just fix the issue where it doesn't always get the right widths for the headers. I am seeing it fail to get the widths about 10% of the time. :(

[barothiz]

I have a similar problem, but the above fix doesn't work in my case. If I add the "top: 0" to the style (tableFloatingHeaderOriginal class) by hand in the browser (element inspector) it fixes the issue. Any ideas why the script doesn't push the top property to the css?

[gregveres]

@barothiz Not sure. When I made the changes it fixed it for me and the call of base.$originalHeader.css is pushing the top setting into the DOM.

[max-l]

had the same issue, applied @gregveres 's fix and it worked.

[gregveres]

Just to follow up, I have since removed the top: line because I stopped using the fixedOffset. It turns out that you n need the top: base.options.fixedOffset if you are using fixedOffset, but you don't need it if you aren't.

I have also switched to jQuery.floatThead.js instead. The jumping of the headers was bugging me so I looked for something else.

[jmosbech]

Hi all,

Sorry for the radio silence. I just merged #133 which might be a fix for the problem you're seeing?

If not, please let me know and I'll gladly set you up as contributors. I'm not using this plugin myself anymore, so these issues have a hard time making it to the top of my to-do list. 😞