Bootstrap Affix plugin with fluid layout

Question

If I would like to use the affix plugin for sidebar in fluid layout but the width of the sidebar always change when it is affixed and the responsive design don't work too.

In the Bootstrap documentation the affix plugin is not used with fluid layout. Maybe because they have the same problem.

Does anybody know how to make it work?

Answer 1

For affix to work with a fluid span3 sidebar, you'll need to add some javascript to clamp the width and manage resizes.

I just wrote a little javascript function to make this work.

Check out this bug from bootstrap.

/*
* Clamped-width. 
* Usage:
*  <div data-clampedwidth=".myParent">This long content will force clamped width</div>
*
* Author: LV
*/
$('[data-clampedwidth]').each(function () {
    var elem = $(this);
    var parentPanel = elem.data('clampedwidth');
    var resizeFn = function () {
        var sideBarNavWidth = $(parentPanel).width() - parseInt(elem.css('paddingLeft')) - parseInt(elem.css('paddingRight')) - parseInt(elem.css('marginLeft')) - parseInt(elem.css('marginRight')) - parseInt(elem.css('borderLeftWidth')) - parseInt(elem.css('borderRightWidth'));
        elem.css('width', sideBarNavWidth);
    };

    resizeFn();
    $(window).resize(resizeFn);
});