将一个粘性div滚动到另一个

Question

我有一个div，一旦滚动到容器顶部，它就会粘住-类似于我发现并遭到黑客入侵的这种小提琴 （我很欣赏这段代码不是很好，但是出于展示我的问题的目的）。

我希望下一个div滚动到上一个div，并在到达相同位置时也保持不变。 此刻，我只能让div像现在一样继续向后滚动或“跳转”。

我希望实现一个div滚动集，每个div都一个接一个地固定在容器的顶部，而不是继续滚动到另一个位置-这是到目前为止我唯一能想到的选择。

 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

这个怎么样？ 应该至少是一个开始。

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>