Twitter Bootstrap - Responsive affix

I'm using Twitter Bootstrap and I have the following:

<div class="row">

    <div class="span3">
        <div data-spy="affix">
            <form>
                <!-- inputs and stuff -->
            </form>
        </div>
    </div>

    <!-- span9 and its contents -->

</div>

Bootstrap is correctly applying the affix effect on <div> and it stays still when I scroll down the page. However, once I resize the page to mobile dimensions and bootstrap responsive effects take place (navbar collapsing/objects aligning nicely under each other), the affixed <div> is now on top of other elements of the page and it gets messy. This is happening because .affix has position: fixed which explains it pretty well.

Now I went to Bootstrap's website and resized the page to mobile dimensions, the affixed element (<ul> in their case) starts flowing nicely with the page, taking its natural place without going on top of other elements. I have also noticed that once that happens, the class is changed from affix to affix-top.

I'm not sure if this is their customization or if it's part of the framework, because the framework is apparently not behaving the same way. Can anyone elaborate on this? I need to have the same behavior on my <div> where if the page gets resized to mobile dimensions the affixed element takes its natural place.

Edit: My observation is a bit flawed. I noticed that the element on their page initially has affix-top and once I scroll below data-top-offset it changes to affix. It still doesn't explain why my <div> won't render like their <ul> when resized.

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.

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!

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 {
    }
  }
}