當到達新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); 
}); 

這應該做的伎倆。