Sticky headers with a fixed page header.

[leenooks]

Hi, I'm just discovered this great library (and new to jquery generally), and am getting your library to do what I want, with 1 minor exception.

My webpage uses bootstrap, and my nav at the top is using navbar-fixed-top - resulting in the header banner staying when users scroll down the page.

If my page has a table, and I'm using your library to stick the header at the moment it is sticking behind my page navbar.

I couldnt figure out what setting I needed to make, so that:

• stickyheader would leave the table header below the page navbar, instead of scrolling behind it.

(I was able to fix this by modifying the jquery.tablesorter.widget.js, around line 757, changing "top : 0" to "top : 57" (which is my required offset).)

• scrolling the table would scroll at the bottom of the table header, not half way through it (after my offset).

(I was able to fix this by modifying the jquery.tablesorter.widget.js around line 843, modifying sTop to add 57 (which is my required offset).)

Both fixes are from commit version 5980d0e (which I got when I downloaded).

Ideally, this should be a config item or better still, it would be great if you can automatically figure out the required offset should be (and maybe the configure item might only require the class name that contains the position:fixed).

If there is a way of doing what I'm trying to achieve, then great - please let me know :)

[Mottie]

Hi @leenooks!

It wouldn't be difficult to add a new stickyHeaders_offset option which you can set to 57. Maybe I can make it so that you can use either a number or a jQuery selector to target the .navbar-fixed-top, then it would figure out that height for you automatically. Would that work? If so, I can include this enhancement in the next update :)

[leenooks]

Hi @Mottie

I would say that it would be perfect if it was automatically determined. I dont know if you can figure that out, or do you need to query a css element to figure out it's height (and thus the required offset).

There may be a need to set it manually as well (via a config item) - but not in my case :)

If it is easy to do both, then why not? "auto mode" and "manual mode"... :)

I'm happy to test it out once you have something before you release it with your next update...

[rgautam08]

Hello @Mottie,

First of all I would like to thanks for providing marvelous features like table sorter.
Intention to emanate this forum , I am facing with sticky header issue.

In my case, since table has more than 20 columns table come up with horizontal scrollbar due to a container div.
When I scroll down the page, Sticky header appears and goes outside the table container div and does not adjust with horizontal scroll bar .

Expectation like :- Sticky header should stick with table and not go out side table div. Also time of horizontal scrolling harmonize with table.

Please help me to handle the scenario . Looking forward to your solution.

[Mottie]

Hi @rgautam08!

Please check out the stickyHeaders_attachTo option. There is also a demo on that page with which you can examine the code.

I hope that answers your question.

[Jolly-Pirate]

stickyHeaders_offset worked fine for me, thanks for the tip :)