title: Bootstrap: Stop affix when reaching end of certain div
body: <p>I have a sidebar thats sticks when you scroll. Now I want it to stop (and be fixed) when reaching a certain div. </p>
  
  <p>For illustration.
  What happends: 
  <a href="http://postimg.org/image/l1n0djb0n/" rel="noreferrer">http://postimg.org/image/l1n0djb0n/</a></p>
  
  <p>What I want:
  <a href="http://postimg.org/image/5evr05x8n/" rel="noreferrer">http://postimg.org/image/5evr05x8n/</a></p>
  
  <p>I needs to stop floating (on scroll) when reaching the bottom of the last content. </p>
  
  <p>How can I do this?</p>
  
  <p>CSS:</p>
  
  <pre><code>#sidebar.affix-top {
  position: static;
  margin-top:0px; 
  }
  
  #sidebar.affix {
  position: fixed;
  top:49px;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code> &lt;div id="sidebar" class="sidebar_package"&gt;
   info for sidebar
  
   &lt;div class="hiddenpackage_c2a"&gt;
       more content
   &lt;/div&gt;
  
   &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>//Side menu floater
  $('#sidebar').affix({
        offset: {
          //top: $('header').height()
          top:185
        }
  });
  </code></pre>