search

Mottie / tablesorter

Github fork of Christian Bach's tablesorter plugin + awesomeness ~
https://mottie.github.io/tablesorter/docs/
2.61k stars 754 forks source link

stickyHeaders_attachTo doesn't work in most cases #1633

Open JohnSmall opened 5 years ago

JohnSmall commented 5 years ago

There's clearly a special undocumented rule about using stickyHeaders_attachTo because it only works in some cases. Mostly it doesn't work at all.

Example, Mottie's JS Fiddle example , works as is, but if you make any tiny change, it stops working. E.g. I tried stickyHeaders_attachTo: '.modal-content' but that doesn't work.

So I tried giving the .modal-content div an id and used that. Still doesn't work.

So there must be a special rule about which element stickyHeaders_attachTo: can actually attach to. But it's not documented anywhere.

I guessed it might be that stickyHeaders_attachTo: can only attach to fixed divs. But when I tried that in the JSFiddle it made no difference. stickyHeaders_attachTo: only works if it's set to '#myModal' the outer div. Anything else fails.

Which actually looks terrible, because the padding in BS modals means that the table inside .modal-content is offset from the headings attached to #myModal, it jumps when it sticks, and you can still see the headings scroll out of view underneath.

Does anyone know the secret of which divs stickyHeaders_attachTo: is allowed to attach to?

JohnSmall commented 5 years ago

Hunting around for similar issues I found this #1371 But...

The solution in https://jsfiddle.net/Mottie/z8Lacguz/36/ is not to use the stickyHeaders widget at all, but to use cssStickyHeaders, set cssStickyHeaders_attachTo: null and use cssStickyHeaders_offset: $('.navbar').height() which implies that cssStickyHeaders_attachTo is a completely useless option.

So now I'm confused. Should I be using stickyHeaders or cssStickyHeaders? Should I ignore cssStickyHeaders_attachTo and just use the offset?

Mottie commented 5 years ago

Hi @JohnSmall!

I believe the issue is that the element that is targeted by attachTo must be the element that scrolls. In the demo, it's #myModal. In issue #1512, it's a div with a .body class. When the attachTo targets an element within the scrolling element, it doesn't provide an appropriate scrollTop value (it'll always be zero).

The offset is meant to add extra space above the sticky header in case you already have an unrelated sticky header above it.