Scroll one sticky div over another

Question

I have a div that sticks once scrolled to top of the container - similar to this fiddle I found and have hacked (I appreciate the code is not great but is for the purposes of showing my issue).

I would like the next div to scroll over the previous div, and also stick once it hits the same position. At the minute, I can only get the div to continue scrolling behind, or 'jump', like what it is doing now.

I wish to achieve a scrolling set of divs that each fix at the top of the container, one after the other, on top of one another, rather than continuing to scroll beyond - this is the only option I can come up with so far.

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

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

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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> 

Answer 1

How about this? Should be at least a start.

https://jsfiddle.net/mqf7h5dz/

HTML:

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

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

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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>