stop sticky div при достижении нового div

Question

У меня есть липкая коробка, которая приклеивается, когда мы прокручиваем div, теперь я хочу, чтобы эта коробка была липкой, когда она достигает нового 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(); 
}); 

Я надеюсь, что это ясно, большое спасибо.

Answer 1

Вы должны настроить ваш JavaScript код немного, чтобы проверить, когда ваш Достичь anchor-stop ДИВ:

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); 
}); 

Это должно сделать трюк.