1

我正在尝试将多个 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>

我正在尝试修复所有#top-pag，当它到达#pag 时，它将被释放。我已经尝试过isotrop提出的解决方案，但问题是使用多个 div 来做到这一点。我尝试了其他一些 jQuery，但我无法成功编辑它——我还是新手。

我认为这张图片将有助于理解我的目标：示例 谢谢大家。

4

1 回答 1

0

你可以试试这样的 

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 所以你不必在 css 值中设置 -50px, -100px

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/

于 2013-09-10T21:32:58.267 回答