title: Bootstrap, keep div fixed after scrolling to it
body: <p>I am using Bootstrap, and have a simple page <a href="http://jimpix.co.uk/words/username-generator.asp" rel="noreferrer">here</a></p>
  
  <p>If you click the green "Go" button and scroll down the page, more records are loaded. I wanted the advert in the right hand column to e.g. "stick" to 10 px from the top of the page once I have scroll down the page and reached the advert div.</p>
  
  <p>As you can see, instead it remains half way down the page.</p>
  
  <p>I have this as the HTML for the div:</p>
  
  <pre><code>&lt;div class="col-md-3"&gt;
      &lt;div data-spy="affix"&gt;
          &lt;script type="text/javascript"&gt;
          .. advert
          &lt;a href="#" class="back-to-top"&gt;Back to Top&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I wondered if there is a way to get it to do what I'm trying to do, as I'm a bit stuck?</p>
  
  <p>Thanks</p>