FixedHeader support for position: fixed content

montulli

I have a site where the header is fixed and the content body is fixed below the header with scrolling enabled.

The fixedHeader plugin does not currently support this type of layout, but I think it could with a small code change.

Here is a test case: http://live.datatables.net/vinuguti/17/

With the current implementation of FixedHeader no scroll events are captured because the main window is not scrolling. I was able to make FixedHeader work on our site by adding a hack to capture scroll events on our scrollable div but it is clearly not the right way do this long term.

From within _constructor:
$('.site-body').on('scroll'+this.s.namespace, DataTable.util.throttle( function () {
that.update();
}, 50 ));

With this hack FixedHeader works properly through all tested scenarios.

Do you have suggestions on how this functionality could be properly integrated into the FixedHeader plugin?

Perhaps a new option called 'scrollableParent' could be added with a jQuery selector? Then the scroll and resize events could be bound to that parent instead of the window. Some changes to the _position function also appear to be necessary.

allan

Hi,

Thanks for posting this! If you used position:fixed on just the header elements rather than the content, you could add the fh-fixedHeader class to your elements (example).

Suspect you might not want to redesign your site for my software though ;-).

My current plan with FixedHeader is to allow it to automatically detect scrolling parent elements. I hadn't actually thought it would be as simple as using update() on each scrolling element, although thinking about it, with recent changes I can see why that might work (if some what unintentionally)!

Allan