title: Make sidebar stick when one of the child elements reaches top having the child element on top of it with an auto height
body: <p>I'm having a problem trying to make my sidebar stick in the correct height and making the desired effect, this is my code:</p>
  
  <p><a href="https://jsfiddle.net/oavgLrf9/" rel="nofollow">https://jsfiddle.net/oavgLrf9/</a></p>
  
  <p>I want my sidebar to add a fixed class when the second module reaches top, the problem is that both of the modules use height auto so their height change depending of the monitor. </p>
  
  <pre><code>&lt;div class="sidebar"&gt;        
      &lt;div class="mod-1"&gt;&lt;/div&gt;
      &lt;div class="mod-2"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Also I want that when the user scrolls top the side bar goes top too, and when it reaches bottom changes to absolute, like this example:</p>
  
  <p><a href="http://jsfiddle.net/gmolop/y3tdL9wd/" rel="nofollow">http://jsfiddle.net/gmolop/y3tdL9wd/</a></p>
  
  <p>I tried using the sticky-kit plug in  it does almost exactly what I want, would be the example 4, but it doesn't stick in the height I need because of these changing values.</p>