Scrollen Sie ein klebriges div über ein anderes

Question

Ich habe ein div, das einmal scrollte oben auf dem Container - ähnlich zu diesem fiddle Ich fand und habe gehackt (Ich weiß, dass der Code ist nicht toll, aber ist für die Zwecke meines Problems) .

Ich möchte das nächste div über das vorherige div scrollen, und auch kleben, sobald es die gleiche Position trifft. Momentan kann ich das div nur dazu bringen, weiter zu scrollen oder zu "springen", so wie es jetzt ist.

Ich möchte einen Scroll-Satz von divs erreichen, die jeweils an der Oberseite des Containers nacheinander übereinander fixiert werden, anstatt weiter zu scrollen - das ist die einzige Option, die ich aufbringen kann mit so weit.

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

Wie wäre das? Sollte zumindest ein Anfang sein.

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