在另一個滾動一個粘滯的div

Question

我有一個div，一旦滾動到容器頂部時會粘住 - 類似於fiddle我發現並被黑客入侵（我欣賞代碼不是很好，但是用於顯示我的問題） 。

我想下一個div滾動上一個div，並堅持一旦它達到相同的位置。在那一刻，我只能讓div繼續滾動，或者像現在正在做的那樣「跳躍」。

我希望實現一組滾動的div，每個div都固定在容器的頂部，一個接一個地在另一個之上，而不是繼續滾動 - 這是我唯一可以選擇的選項迄今爲止。

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