Прокрутите один липкий div над другим

Question

У меня есть div, который палочки прокручивается до вершины контейнера - похоже на это fiddle Я нашел и взломал (я ценю, что код невелик, но для демонстрации моей проблемы) ,

Я хотел бы, чтобы следующий div прокручивал предыдущий div, а также палка, когда он попадает в ту же позицию. В этот момент я могу заставить div продолжать прокрутку позади или «прыгать», как то, что он делает сейчас.

Я хочу создать набор прокруток divs, каждый из которых закрепляется в верхней части контейнера один за другим, поверх друг друга, вместо того, чтобы продолжать прокручивать дальше - это единственный вариант, который я могу придумать до сих пор.

Html

<div id="sticky-anchor"></div> 
<div id="sticky">This will stay at top of page</div> 
<p>...</p> 
<div id="sticky-anchor"></div> 
<div id="sticky1">This should continue to scroll and stick on top 
</div> 
<p>...</p> 

CSS

#sticky, #sticky1{ 
padding: 0.5ex; 
width: 400px; 
background-color: #333; 
color: #fff; 
font-size: 2em; 
border-radius: 0.5ex; 
} 

#sticky.stick { 
margin-top: 0 !important; 
position: fixed; 
top: 0; 
z-index: 1; 
border-radius: 0 0 0.5em 0.5em; 
} 
#sticky1.stick { 
margin-top: 0 !important; 
position: fixed; 
top: 0; 
z-index: 2; 
border-radius: 0 0 0.5em 0.5em; 
} 

body { 
margin: 1em; 
} 

p { 
margin: 1em auto; 
} 

JavaScript

function sticky_relocate() { 
var window_top = $(window).scrollTop(); 
var div_top = $('#sticky-anchor').offset().top; 
if (window_top > div_top) { 
    $('#sticky').addClass('stick'); 
    $('#sticky-anchor').height($('#sticky').outerHeight()); 
} else { 
    $('#sticky').removeClass('stick'); 
    $('#sticky-anchor').height(0); 
} 
} 

$(function() { 
$(window).scroll(sticky_relocate); 
sticky_relocate(); 
}); 
function sticky_relocate() { 
var window_top = $(window).scrollTop(); 
var div_top = $('#sticky-anchor').offset().top; 
if (window_top > div_top) { 
    $('#sticky1').addClass('stick'); 
    $('#sticky-anchor').height($('#sticky1').outerHeight()); 
} else { 
    $('#sticky1').removeClass('stick'); 
    $('#sticky-anchor').height(0); 
} 
} 

$(function() { 
$(window).scroll(sticky_relocate); 
sticky_relocate(); 
}); 

Answer 1

Как насчет этого? Должно быть хотя бы начало.

https://jsfiddle.net/mqf7h5dz/

HTML:

<div id="sticky_container"></div> 

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque, lectus in pharetra blandit, augue mauris pulvinar erat, ut euismod nibh lectus sed diam. Nulla fringilla ultrices ligula. Aliquam vitae felis metus. Maecenas lacinia bibendum 
    accumsan. Curabitur lobortis convallis purus non imperdiet. Morbi ut vulputate mauris. Curabitur lacinia faucibus volutpat. Nulla elit tortor, rhoncus ut luctus eget, blandit in risus. Integer accumsan ullamcorper lorem id porttitor. Aliquam vitae 
    </p> 

<div class="sticky-anchor"></div> 
<div class="sticky sticky-header">This will stay at top of page</div> 

<p>Nunc eu sapien turpis. Proin non arcu orci, eget volutpat tellus. Maecenas tempor mattis risus, quis pellentesque eros imperdiet nec. Vestibulum porttitor, justo at ornare bibendum, magna lectus cursus felis, tristique consectetur arcu justo at augue. 
    Mauris ultrices mollis sem eget elementum. Sed ipsum orci, tempus vel porttitor vel, tristique eu erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis aliquam pulvinar nisl, vitae congue velit ultricies 
    eget. 
</p> 

<p>Nunc eu sapien turpis. Proin non arcu orci, eget volutpat tellus. Maecenas tempor mattis risus, quis pellentesque eros imperdiet nec. Vestibulum porttitor, justo at ornare bibendum, magna lectus cursus felis, tristique consectetur arcu justo at augue. 
    Mauris ultrices mollis sem eget elementum. Sed ipsum orci, tempus vel porttitor vel, tristique eu erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis aliquam pulvinar nisl, vitae congue velit ultricies 
    eget. 
</p> 

<div class="sticky-anchor"></div> 
<div class="sticky sticky-header">This should continue to scroll and stick on top 
</div> 

    <p> 
    Phasellus malesuada euismod lectus nec bibendum. Ut adipiscing dapibus ipsum nec iaculis. Donec quis dignissim tortor. Suspendisse molestie rhoncus enim hendrerit ultricies. Proin semper purus posuere urna porttitor suscipit.</p> 
<p>Curabitur odio dui, imperdiet sed sodales nec, aliquet id nisl. Mauris nec sapien nibh. Maecenas vel sem at felis posuere rutrum non non mauris. Maecenas at lectus ut ipsum iaculis lobortis. Vivamus ut porta nisi. Phasellus tempor accumsan urna eu faucibus. 
    Duis sed ligula neque, pulvinar euismod velit. Donec tristique eros at dolor ornare sagittis. Vestibulum sodales imperdiet ante et tincidunt. Suspendisse malesuada tempor nisi ac accumsan. Pellentesque accumsan pulvinar odio, id adipiscing diam mollis 
    eu. Nulla id mi rutrum elit rutrum ultrices. Maecenas viverra, est ut pellentesque ultricies, ligula nisi auctor tellus, vitae bibendum mi nunc non libero. Mauris in facilisis enim. Proin facilisis, risus et tempus accumsan, orci enim egestas arcu, 
    sit amet sodales risus leo quis nisi.</p> 

     <p> 
    Phasellus malesuada euismod lectus nec bibendum. Ut adipiscing dapibus ipsum nec iaculis. Donec quis dignissim tortor. Suspendisse molestie rhoncus enim hendrerit ultricies. Proin semper purus posuere urna porttitor suscipit.</p> 
<p>Curabitur odio dui, imperdiet sed sodales nec, aliquet id nisl. Mauris nec sapien nibh. Maecenas vel sem at felis posuere rutrum non non mauris. Maecenas at lectus ut ipsum iaculis lobortis. Vivamus ut porta nisi. Phasellus tempor accumsan urna eu faucibus. 
    Duis sed ligula neque, pulvinar euismod velit. Donec tristique eros at dolor ornare sagittis. Vestibulum sodales imperdiet ante et tincidunt. Suspendisse malesuada tempor nisi ac accumsan. Pellentesque accumsan pulvinar odio, id adipiscing diam mollis 
    eu. Nulla id mi rutrum elit rutrum ultrices. Maecenas viverra, est ut pellentesque ultricies, ligula nisi auctor tellus, vitae bibendum mi nunc non libero. Mauris in facilisis enim. Proin facilisis, risus et tempus accumsan, orci enim egestas arcu, 
    sit amet sodales risus leo quis nisi.</p> 

     <p> 
    Phasellus malesuada euismod lectus nec bibendum. Ut adipiscing dapibus ipsum nec iaculis. Donec quis dignissim tortor. Suspendisse molestie rhoncus enim hendrerit ultricies. Proin semper purus posuere urna porttitor suscipit.</p> 
<p>Curabitur odio dui, imperdiet sed sodales nec, aliquet id nisl. Mauris nec sapien nibh. Maecenas vel sem at felis posuere rutrum non non mauris. Maecenas at lectus ut ipsum iaculis lobortis. Vivamus ut porta nisi. Phasellus tempor accumsan urna eu faucibus. 
    Duis sed ligula neque, pulvinar euismod velit. Donec tristique eros at dolor ornare sagittis. Vestibulum sodales imperdiet ante et tincidunt. Suspendisse malesuada tempor nisi ac accumsan. Pellentesque accumsan pulvinar odio, id adipiscing diam mollis 
    eu. Nulla id mi rutrum elit rutrum ultrices. Maecenas viverra, est ut pellentesque ultricies, ligula nisi auctor tellus, vitae bibendum mi nunc non libero. Mauris in facilisis enim. Proin facilisis, risus et tempus accumsan, orci enim egestas arcu, 
    sit amet sodales risus leo quis nisi.</p> 

CSS:

.sticky { 
padding: 0.5ex; 
width: 400px; 
background-color: #333; 
color: #fff; 
font-size: 2em; 
border-radius: 0.5ex; 
} 

.sticky-header { 
padding: 0.5ex; 
width: 400px; 
background-color: #333; 
color: #fff; 
font-size: 2em; 
border-radius: 0.5ex; 
} 

#sticky_container { 
    position: fixed; 
    top: 0; 
} 

.sticky.stick { 
margin-top: 0 !important; 
position: fixed; 
top: 0; 
z-index: 1; 
border-radius: 0 0 0.5em 0.5em; 
background: red; 
} 

body { 
margin: 1em; 
} 

p { 
margin: 1em auto; 
} 

JS:

function sticky_relocate() { 
    var window_top = $(window).scrollTop(); 
    var div_top; 

    $('.sticky').each(function(){  
    //$(this).find(".scrolling").width(width * imgLength * 1.2); 
    div_top = $(this).offset().top; 
    console.log("Top for this div: ", div_top); 

    if (window_top > div_top) { 
     $(this).removeClass('sticky'); 
     $(this).addClass('sticked'); 
     //$(this).height($('.sticky').outerHeight()); 

     $(this).clone().appendTo($('#sticky_container')); 
    }  
    }); 
} 

$(function() { 
    $(window).scroll(sticky_relocate); 
    sticky_relocate(); 
});