将DIV更改为“ position：fixed”，然后将其更改回“ static”并显示其余DIV

debugcn 发表于 Dev

哈维达

我有几个div，滚动一些后，第二个div将是“ position：fixed”，再滚动一些之后，它将再次回到“ position：static”，但是问题是：

第4个div将排在第3个，而不是第3个（因为在第2个div时通过滚动已通过）。

如何显示第二个格之后的第三个格？

这是FIDDLE：http : //jsfiddle.net/5vzze/2/

HTML：

<div id="container">
    <div class="slide" id="d1">1</div>
    <div class="slide" id="d2">2</div>
    <div class="slide" id="d3">3</div>
    <div class="slide" id="d4">4</div>
    <div class="slide" id="d5">5</div>
    <div class="slide" id="d6">6</div>
    <div class="slide" id="d7">7</div>
</div>

CSS：

#container{
    position: relative;
}

.slide{
    min-height: 400px;
    height: 500px;
    width: 100%;
}

jQuery的：

$(window).scroll(function(){
    var curScrollVal = $(window).scrollTop();

    if( curScrollVal > 500 && curScrollVal < 1500){
        $('#d2').css({'position': 'fixed', 'top': 0, 'background-color': 'pink'});
    }
    else if( curScrollVal > 1500 ){
        $('#d2').css({'position': 'static', 'top': 'auto', 'background-color': 'grey'});

        //How can I show div "#d3" and the rest?
    }

});

Lighty_46

不能完全确定我是否理解您的意思，但这正是我认为您要的。

这还是这个？

$(window).scroll(function(){
var curScrollVal = $(window).scrollTop();

if( curScrollVal > 500 && curScrollVal < 1500){
    $('#d2').css({'position': 'fixed', 'top': 0, 'background-color': 'pink'});
    $('#d3').css({'margin-top': '500px'});
}
//now I wanna show the next divs in order
else if( curScrollVal > 1500 ){
    $('#d2').css({'position': 'static', 'top': 'auto', 'background-color': 'grey'});

    //How can I show div "#d3" and the rest?
}

});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。