Sticky element that follows parent

Question

I'm trying to build sticky element that follows parent element as I scroll the window and stops when I reach the end of parent. But, I'm having trouble with bottom limit. I want the sticky element stops sticked to bottom, but I don't get the result with this code:

else if ($(window).scrollTop() >= $limit - $stickyH - 10) {
    $sticky.css('top', $limit);
}

What am I doing wrong? Here is the jsfiddle https://jsfiddle.net/just_vr/3nb60dqc/

Answer 1

I think that you should assign position relative to parent of sticky element and define your conditions differently like this

    if ($(window).scrollTop() > $start - 10 && $(window).scrollTop() <= $limit - $stickyH - 10) {
    $sticky.css({
    'position':'fixed', 
    'top': 10});
    }
     else if ($(window).scrollTop() > $limit - $stickyH - 10) {
     $sticky.css({
           'position': 'absolute',
           'top'     : 'auto',
           'bottom'  : 0
       });
     }

Check it out here https://jsfiddle.net/aleksandarbatin/r5sa0gq3/1/

Hope that it helps.