Search code examples
javascriptjqueryresponsive-designcal

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

  • you can use HcSticky to solve your problem.

    http://someweblog.com/hcsticky-jquery-floating-sticky-plugin/

    see examples: http://someweblog.com/demo/hcsticky/