[SOLVED] Make sidebar stick when one of the child elements reaches top having the child element on top of it with an auto height

Make sidebar stick when one of the child elements reaches top having the child element on top of it with an auto height

I'm having a problem trying to make my sidebar stick in the correct height and making the desired effect, this is my code:

https://jsfiddle.net/oavgLrf9/

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.

<div class="sidebar">        
    <div class="mod-1"></div>
    <div class="mod-2"></div>
</div>

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:

http://jsfiddle.net/gmolop/y3tdL9wd/

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.

Solution