修复页面底部的多个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/