stop sticky div when reaches new div

Question

I have a sticky box that stick once we scroll past a div, now I wish to stop this box being sticky once it reaches a new div.

<div id="sticky-anchor"></div>
    <div id="sticky">
        box
    </div>
    <div>             
        content that box scrolls on top
    </div>
    <div id="stop-anchor"></div>
    <div>
        other content that I do not with to have the sticky area in
    </div>

#sticky.stick {
    top: 113px;
    padding: 36px 0 36px 0;
    z-index: 10000;
    background-color: $white;
    position: fixed;
    width: 60%;
    left: 20%;
}

function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var div_top = $('#sticky-anchor').offset().top;
    if (window_top > div_top) {
        $('#sticky').addClass('stick');
    }
    else {
        $('#sticky').removeClass('stick');
    }
}

$(function () {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
});

I hope this is clear, many thanks.

score 3 · Accepted Answer · answered Feb 06 '15 at 12:25

You'll have to adjust your javascript code a bit to check when your reach the anchor-stop div:

function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var div_top = $('#sticky-anchor').offset().top;
    var stop_top = $('#stop-anchor').offset().top;
    if (window_top > div_top && window_top < stop_top) {
        $('#sticky').addClass('stick');
    }
    else {
        $('#sticky').removeClass('stick');
    }
}

$(document).ready(function () {
    $(window).scroll(sticky_relocate);
});

This should do the trick.

stop sticky div when reaches new div

1 Answers1