然后固定滚动元素

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

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

此处的文档：

http://imakewebthings.com/waypoints/

快捷方式：

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

编辑：

用于多个 waypoints...

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

然后固定滚动元素

Scrolling elements then fixed

javascript

css

scroll

fixed