Twitter Bootstrap - Responsive affix

Solution 1:

Bootstrap uses an extra CSS file for their docs that overrides the default behavior of some elements.

Specifically, on line 917, they change the position of the affixed sidebar (as part of a media query for <767px width) to static:

.bs-docs-sidenav.affix {
  position: static;
  width: auto;
  top: 0;
}

They have several additional custom styles applied to the affixed sidebar; you can view them by using Chrome Web Inspector/Firebug on a phone-sized window.

Solution 2:

HTML Don't affix the span3 (or span4 etc) DIV but a child of it; in my case I affixed #sidebar. Also you don't have to add .affix class or data-offset-top="XXX" to this div. The following Javascript will do the trick.

  <aside class="span3">
    <div id="sidebar">
     <p>some content</p>
    </div>
  </aside> 

CSS (the below code doesn't exist on bootstrap.css, I copied it from http://twitter.github.io/bootstrap/assets/css/docs.css)

.affix-bottom {
    position: absolute;
    top: auto;
    bottom: 400px;
}

Javacript the following js will change class of #sidebar from .affix to .affix-bottom according to how much page is scrolled

   $('#sidebar').affix({
      offset: {
        bottom: 450
      }
   });

Indeed on small resolutions #sidebar will overlap other elements. To solve this use bootstrap's media queries http://twitter.github.io/bootstrap/scaffolding.html#responsive

As Sara previously pointed out, you can use something like..

@media(max-width:767px){
   .affix {
     position: static;
     width: auto;
     top: 0;
    }
}

..so that you make the #sidebar behave.

Hope this helps somebody!

Solution 3:

I had the same issue, and my solution was to remove the affix behavior for smaller screen sizes. For example, to remove it for sizes below 1199 pixels:

#map {

  @media (min-width: 1199px) {
    &.affix-top {
    }

    &.affix {
      position: fixed;
      top: 20px;
      bottom: 100px;
    }

    &.affix-bottom {
    }
  }
}