Bootstrap Affix plugin with fluid layout

Bootstrap Affix plugin with fluid layout

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?

Solutions/Answers:

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

Solution 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.

Related:  Remove the first line of a twitter bootstrap table

Solution 3:

You have to explicitly set the width property (or min-width) for the sidebar. If you look at the page Andres pointed to, the class “bs-docs-sidenav” has an explicit width of 228px.

This overrides the “.span3” class and prevents the sidebar from resizing as you scroll.

If you remove that explicit width declaration and scroll the page the sidebar resizes just like the problem you’re seeing in your own page.

Solution 4:

$(document).ready(function () {
  setTimeout(function () {
    $('.sidebar > *').affix({
      offset: {
        top: function () { return $window.width() <= 980 ? 290 : 210 }
        , bottom: 270
      }
    })
  }, 100)
});

where your page is like:

<div class="span2 navper">
  <ul class="nav nav-tabs nav-stacked" data-spy="affix">
    <li><a href="#">Homepage</a></li>
    <li><a href="#">Homepage</a></li>
    <li><a href="#">Homepage</a></li>
    <li><a href="#">Homepage</a></li>
    <li><a href="#">Homepage</a></li>
  </ul>
</div>

References