Question

我正在尝试将多个divs叠加在一起 - 固定在底部。经过一些滚动，我想一个接一个地“释放”。

您可以在此处找到基本代码：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>

我正在尝试修复所有＃top-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”）具有相同的高度50px，则可以设置所有$（“＃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

#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/

修复页面底部的多个div，直到我滚动到某个点

1 个答案: