修復頁面底部的多個div，直到滾動到某個點

Question

我試圖讓多個div彼此堆疊在一起，固定在底部。一些滾動後，我想「釋放」一個接一個的div。

你可以在這裏找到基本代碼：http://jsfiddle.net/krafna/vV3nP/31/

<div id="open-page">WELCOME PAGE<br>please scroll down</div> 
<div id="container"> 
<div id="top-pag1">1</div> 
<div id="pag1"></div> 

<div id="top-pag2">2</div> 
<div id="pag2"></div> 

<div id="top-pag3">3</div> 
<div id="pag3"></div> 

<div id="top-pag4">4</div> 
<div id="pag4"></div> 

我試圖解決所有＃頂級PAG，當它到達#pag它會被釋放。 我已經嘗試了isotrop提出的解決方案，但問題是要用多個div來做到這一點。我嘗試了一些其他的jQuery，但我無法用成功進行編輯 - 我在這方面仍然是新手。

我覺得這張圖片有助於理解我的目標：example 謝謝大家。

Answer 1

，你可以嘗試這樣的事情

var toppag=$("#top-pag1,#top-pag2,#top-pag3,#top-pag4"); 
var pag=$("#pag1,#pag2,#pag3,#pag4"); 
toppag.css({position:"fixed",bottom:"0px"}); 
$(window).scroll(function() { 
    var scroll=$(this).scrollTop()+$(this).height(); 
    pag.each(function(i,n){ 
     if(scroll > $(this).offset().top) { 
      toppag.eq(i).css({'position':'relative'}); 
      if(i>0){ 
       toppag.eq(i).css({'top':i*-50}); 
      } 
     } 
     if(scroll < ($(this).offset().top + toppag.eq(i).height())) { 
      toppag.eq(i).css({'position':'fixed',"top":""}); 
     } 
    }); 
});  

http://jsfiddle.net/vV3nP/34/
如果所有$（ 「＃PAG1，＃PAG2，＃PAG3，＃PAG4」）具有相同的高度50像素可以設置所有$（」 ＃top-pag1，＃top-pag2，＃top-pag3，＃top-pag4「）css top：-50px和margin-bottom：-50px所以你不必設置像-50px，-100px的css值

var toppag=$("#top-pag1,#top-pag2,#top-pag3,#top-pag4"); 
var pag=$("#pag1,#pag2,#pag3,#pag4"); 
$(window).scroll(function() { 
    var scroll=$(this).scrollTop()+$(this).height(); 
    pag.each(function(i,n){ 
     if(scroll > $(this).offset().top) { 
      toppag.eq(i).css({'position':'relative',"top":"-50px","margin-bottom":"-50px"}); 
     } 
     else if(scroll < ($(this).offset().top + toppag.eq(i).height())) { 
      toppag.eq(i).css({'position':'fixed',"top":"","margin-bottom":""}); 
     } 
    }); 
});  

像這樣

的CSS 210

#pag2{ 
    background:#565656; 
} 
#pag3{ 
    background:#000; 
} 
#pag4{ 
    background:#FF6258; 
} 
#top-pag1, #top-pag2, #top-pag3, #top-pag4{ 
    height:50px; position:fixed;bottom:0px; 
} 
#top-pag1{ 
    background:#8AC14D; 
    width:250px; 
} 
#top-pag2{ 
    background:#565656; 
    width:200px; 
} 
#top-pag3{ 
    background:#000; 
    color:#FFF; 
    width:150px; 
} 
#top-pag4{ 
    background:#FF6258; 
    width:50px; 
}  

固定的jsfiddle http://jsfiddle.net/vV3nP/37/