Сделать содержание липким на прокрутке до точки в jQuery

Question

У меня есть div, который установлен в position: relative. Он достигает fixed, когда верхняя часть окна достигает его. Div находится в контейнере (синий в примере ниже), и я хотел бы вернуть его обратно в relative, когда он достигнет нижней части родительского контейнера (синий).

Это мой код упрощен и мой Fiddle:

HTML:

<div class="green"></div> 

<div class="blue"> 
    <div class="sticky">Sticky</div> 
</div> 

<div class="red"></div> 

CSS:

.blue { 
    background-color: blue; 
    height: 500px; 
} 

.sticky { 
    width: 200px; 
    background-color: yellow; 
    text-align: center; 
    top: 0; 
} 

.red { 
    background-color: red; 
    height: 800px; 
} 

.green { 
    background-color: green; 
    height: 200px; 
} 

И JQuery:

$(document).ready(function() { 
    var stickyTop = $('.sticky').offset().top; 

    $(window).scroll(function() { 
    var windowTop = $(window).scrollTop(); 

    if (stickyTop < windowTop) { 
     $('.sticky').css('position', 'fixed'); 
    } else { 
     $('.sticky').css('position', 'relative'); 
    } 
    }); 
}); 

Answer 1

Добавить следующее условие Вашего if заявление:

$(".blue").height() + $(".blue").offset().top > windowTop 

Ваш код должен выглядеть следующим образом:

$(document).ready(function() { 
    var stickyTop = $('.sticky').offset().top; 

    $(window).scroll(function() { 
    var windowTop = $(window).scrollTop(); 
    if (stickyTop < windowTop && $(".blue").height() + $(".blue").offset().top - $(".sticky").height() > windowTop) { 
     $('.sticky').css('position', 'fixed'); 
    } else { 
     $('.sticky').css('position', 'relative'); 
    } 
    }); 
}); 

См updated JSFiddle.