title: Using Affix in Bootstrap 2.3.2
body: <p>I'm trying to create a sidebar like  <a href="http://getbootstrap.com/2.3.2/javascript.html#affix" rel="nofollow">this</a>
  my sidebar overlaps footer.I need the sidebar move up when scroll reaches the end.( exactly like the link)  here is my code:
  Css:</p>
  
  <pre><code> .bs-docs-sidenav {
          background-color: #FFFFFF;
          border-radius: 6px 6px 6px 6px;
          box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
          margin: 60px 0 0;
          padding: 0;
          width: 228px;
      }
  
      .bs-docs-sidenav &gt; li:first-child &gt; a {
          border-radius: 6px 6px 0 0;
      }
  
      .bs-docs-sidenav &gt; li:last-child &gt; a {
          border-radius: 0 0 6px 6px;
      }
  
      .bs-docs-sidenav &gt; li &gt; a {
          border: 1px solid #E5E5E5;
          display: block;
          margin: 0 0 -1px;
          padding: 8px 14px;
      }
  
      .footer {
          background-color: #F5F5F5;
          border-top: 1px solid #E5E5E5;
          margin-top: 70px;
          padding: 30px 0;
          text-align: center;
      }
  
      .affix-top {
          position: absolute;
          top: 0px;
          bottom: auto;
      }
  
      .affix-bottom {
          position: absolute;
          top:auto;
          bottom: 200px;
      }
  
      .affix {
          top: 0;
      }
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>  &lt;ul data-spy="affix" data-offset-top="0" data-offset-bottom="0" class="nav nav-list 
     bs-docs-sidenav affix"&gt;
      &lt;li class="active"&gt;
          &lt;a href="#m1"&gt;
              menu1
              &lt;i class="icon-chevron-left"&gt;&lt;/i&gt;
          &lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="#m2"&gt;
              menu 2
              &lt;i class="icon-chevron-left"&gt;&lt;/i&gt;
          &lt;/a&gt;
      &lt;/li&gt;
     &lt;/ul&gt;
  </code></pre>
  
  <p>what is wrong with my code?</p>