FixedHeader with responsive Bootstrap 2.1

knerdboy

I'm using FixedHeader with a Bootstrap 2.1 responsive layout which has a fixed navbar when the window width is >= 979px, but un-fixes itself and scrolls off the top of the page when the window shrinks to anything less. This, of course, causes my fixed table header to be set 40px too low when that happens.

Can anyone think of a way to reset the offsetTop to 0 when the window shrinks to less than 979px?

Thanks!

allan

You'd need to make a change to FixedHeader that will bind to window.resize and alter the internal variables as needed. There isn't currently an external API for this.

Allan

knerdboy

Thanks, Allan. That worked.

There was already a function bound to the window.resize event in the fnInit function, so I just modified that slightly like so:

[code]
jQuery(window).resize( function () {
if( $(window).width() < 979 ) {
s.oOffset.top = 0;
} else if( typeof oInit.offsetTop != 'undefined' ) {
s.oOffset.top = oInit.offsetTop;
}
FixedHeader.fnMeasure();
that._fnUpdateClones.call(that);
that._fnUpdatePositions.call(that);
} );
[/code]

I also made a slight change to the fnInitSettings function in case I start off with a window that's already less than 979 px:

[code]
if ( typeof oInit.offsetTop != 'undefined' &&
$(window).width() >= 979 ) {
s.oOffset.top = oInit.offsetTop;
}
[/code]

With "offsetTop" set to 40 in my js files, this works great.

Thanks again!

allan

Excellent - and thank you for sharing your solution to the problem. I'm sure others will find it useful!

Regards,
Allan