V Raja V Raja - 1 year ago 85
jQuery Question

Sticky element that follows parent

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 Source

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) {
    'top': 10});
     else if ($(window).scrollTop() > $limit - $stickyH - 10) {
           'position': 'absolute',
           'top'     : 'auto',
           'bottom'  : 0

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

Hope that it helps.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download