滚动元素然后修复

Question

我似乎无法找到一种方法来做到这一点。我找到了几个例子，可以在经过某个点时修复一个元素但不会重叠多个项目。

以下是我想要的网站：https://jsfiddle.net/42q4go5L/5/

$(document).scroll(function(){
el = $(".wrapper");
wrapperOffset = el.offset().top; 
scrollPosition = $(window).scrollTop();
if (wrapperOffset < scrollPosition){
    el.css("position", "fixed");
    el.css("top", "0");
}else{
    el.css("position", "relative");
    el.css("top", "100%");
}

}）

我想要的是当div 2到达页面顶部时，它会切换到固定。然后当div 3到达顶部时，它会被修复，依此类推......

我的第一个div是固定的，所以你已经可以看到我正在寻找的结果。也许我设置我的html / css的方式也不起作用。我刚刚开始使用javascript，所以不要判断太多...

Answer 1

尝试使用路标将元素固定在滚动的设定位置，您会发现它使用起来非常简单，并且还有粘性元素的快捷方式。

此处的文档：

http://imakewebthings.com/waypoints/

快捷方式：

http://imakewebthings.com/waypoints/shortcuts/sticky-elements/

修改

用于多个航路点...

$('.wrapper').each(function() {
    $(this).waypoint(function() {
        //do something
    });
});