title: bootstrap-affix : Div underneath affix "jumps" to top. How do I make it smoothly scroll behind?
body: <p>Been playing with boostrap for a few days and amazed at the capabilities it has to offer.</p>
  
  <p>Have been trying to have a "header" of some sorts, which is affixed to the top when the user scrolls down.</p>
  
  <p>You can find my current work here: <a href="http://mp3dj.free.fr/affix/site/" rel="noreferrer">http://mp3dj.free.fr/affix/site/</a></p>
  
  <p>However you will notice that, when scrolling down, the "POST 1" suddenlty jumps to the top of the page. i.e there is no smooth scroll behind like here: <a href="http://jsfiddle.net/namuol/Uaa3U/" rel="noreferrer">http://jsfiddle.net/namuol/Uaa3U/</a></p>
  
  <p>Current code:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row affix-top" data-spy="affix" data-offset-top="60"&gt;
      &lt;div class="span12"&gt;
        &lt;div class="row"&gt;
          &lt;div class="span3"&gt;
            &lt;img src="http://www.socialfork.net/public/images/default-profile-photo-female.jpg" class="img-polaroid"&gt;
          &lt;/div&gt;
        &lt;div class="span9"&gt;&lt;h1&gt;Samantha Sam&lt;/h1&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;div class="span12"&gt;
        &lt;div id="post1" class="box"&gt;
          &lt;h1&gt;Post 1&lt;/h1&gt;
          &lt;p&gt; Scroll Down↓&lt;/p&gt;
        &lt;/div&gt;
        &lt;div id="post2" class="box"&gt;&lt;h1&gt;Post 2&lt;/h1&gt;&lt;/div&gt;
        &lt;div id="post3" class="box"&gt;&lt;h1&gt;Post 3&lt;/h1&gt;&lt;/div&gt;
       &lt;/div&gt;
     &lt;/div&gt;   
  &lt;/div&gt;
  </code></pre>
  
  <p>Any help appreciated!</p>