javascript - 到达新 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-stopdiv：

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

这应该可以解决问题。