Deprecate fixedHeader in favour of "position: sticky" based solution

[iant-ee]

When you use FixedHeader in Firefox you will see an error in the console:
"This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects for further details and to join the discussion on related tools and features!"

I intend to switch my application over from using FixedHeader to using position: sticky, as recommended in the above article. Once I have done so I will post my findings here as I suspect it would be better for FixedHeader to either be rewritten making use of position: sticky, or for it to be entirely deprecated and documentation written to help people write their own fixed header CSS.

entirely deprecated and documentation written to help people write their own fixed header CSS.

Ultimately, I would love for that to be the case. The last time I checked only Firefox supported poisition:sticky at all. It looks like the other browsers have moved on it a bit but its still buggy (doing it on the th elements oddly).

If Firefox is your main target, then yes, throw FixedHeader out and used position:sticky. For other browsers, for the time being, this is needed.

[iant-ee]

Shame. I did a quick test in Firefox using thead before opening this and it worked great (no lag, which is noticeable at present). Most browsers support it on TH, I think that will be enough for my use case. The main exceptions are IE11 and Opera mini, I'm happy to gracefully degrade for those browsers. Others may not be.

I think the main issue with using th is when multiple header rows are used. Reading the Chrome bug on the topic, it appears they have no plan to implement thead support for position:sticky.

[carstenfuchs]

It seems that Firefox 59+ supports position: sticky also on thead and other table elements. It works for me on thead very well and I think it can even be used to fix the leftmost column.

Yup - I've played around with position:sticky in Firefox before and its a fantastic addition. But without support in Blink / Webkit I don't think we can realistically deprecate FixedHeader yet.

[minusdavid]

It might be worth revisiting this one. It looks like position:sticky is widely supported now.

We've been having issues with fixedHeader jittering on scroll down and the easiest solution so far has been using position:sticky instead.

[AllanJard]

I've revisited it a number of times and I'm sure I will many more times until it works. However, one of the problems is that it wouldn't work with the scrolling features built into DataTables. Also, I need it to work with FixedColumns (which does use position: sticky). I could use it for the simple and non-scrolling case, but then I've got two code paths to maintain, one with limitations.

As I say, I will keep coming back to it and hopefully position: sticky will continue to improve in browsers.

[minusdavid]

Mmm that makes sense. Another potential issue is footers. I find FixedHeader works well with footers but with position: sticky the header overlaps the footer when scrolling down on a long page and it doesn't look as polished as FixedHeader.