Элементы прокрутки затем исправлены

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