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?

Breena

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

Crispy

elegant solution, getting.container in bootstrap3, give you the ability to have nice affixed stacked navbar – Remind

You might want to watch out for box-model declarations here – Rozanna

Best solution out there. Should be added to BS library. – Wrongly

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.

Penny

Thank You for your answer. Yes the demo is responsive, but not with fluid grid system. And there is the problem. – Breena

@Breena totally forgot this question, only noticed your reply after a downvote :/ ... tested the bootstrap affix plugin with a fluid setup and it appears to be working fine with the latest bootstrap, which I'm guessing was an issue they fixed. Here is a demo: jsbin.com/urinum/1 – Penny

@Andres-ilich: The demo you point to includes assets/css/docs.css, which has specific tailoring for various devices. See below ` (at)media (max-width: 767px) { .bs-docs-sidenav.affix { position: static; width: auto; top: 0; } ` – Sigismond

@DiomidisSpinellis at the time of writing, I don't remember if the bootstrap had those styles. The framework has gone through quite a few changes and updates since the question was asked. – Penny

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

Orion

But with a fixed-width it is not fluid anymore. – Visitant

Answer 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>

Musicianship