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);
});

Answer 2

The affixed demo on their website is responsive, it positions itself on the top of the page as expected. The position:fixed CSS property in mobile devices and on smaller screens is not a viable option so that functionality is removed.