title: Twitter-bootstrap 3 affixed sidebar overlapping content when window resized and also footer
body: <p>I am having problems with an overlapping sidebar when I use affix for bootstrap 3 and resize the window. Is there a way to add some css class so that instead of overlapping the column, the menu affixes to the top? </p>
  
  <p>Also the column is overlapping the footer. Any help would be greatly appreciated. It seems that many people are having this same issue.</p>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-md-4 column"&gt;
                  &lt;ul id="sidebar" class="nav nav-stacked" data-spy="affix" data-offset-top="130"&gt;
                &lt;li&gt;&lt;a href="#software"&gt;&lt;b&gt;Software&lt;/b&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;ul&gt;
                         &lt;li&gt;&lt;a href="#features"&gt;Features&lt;/a&gt;&lt;/li&gt;
                         &lt;li&gt;&lt;a href="#benefits"&gt;Benefits&lt;/a&gt;&lt;/li&gt;
                         &lt;li&gt;&lt;a href="#costs"&gt;Costs&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
  
             &lt;/ul&gt;
  
      &lt;/div&gt;
      &lt;div class="col-md-8 column"&gt;
              &lt;p&gt;blah, blah, blah&lt;/p&gt;
              &lt;hr&gt;
            &lt;a class="anchor3" id="top" name="software"&gt;&lt;/a&gt;
              &lt;h2 style="font-weight:bold;"&gt;Software&lt;/h2&gt;
   &lt;p&gt;
   blah, blah, blah...&lt;/p&gt;&lt;br&gt;&lt;br&gt;
  
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>Here is the CSS:</p>
  
  <pre><code>#sidebar.affix-top {
  position: static;
  }
  
  #sidebar.affix {
  position: fixed;
  top: 100px;
  }
  </code></pre>