FixedHeader with responsive Bootstrap 2.1

FixedHeader with responsive Bootstrap 2.1

knerdboyknerdboy Posts: 2Questions: 0Answers: 0
edited March 2013 in FixedHeader
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!

Replies

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin
    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
  • knerdboyknerdboy Posts: 2Questions: 0Answers: 0
    edited March 2013
    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!
  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin
    Excellent - and thank you for sharing your solution to the problem. I'm sure others will find it useful!

    Regards,
    Allan
This discussion has been closed.