然后固定滚动元素

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