然后固定滾動元素

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