将DIV更改为“position：fixed”然后将其改回“静态”并显示其余的DIV [英] Changing a DIV to "position:fixed" then change it back to "static" and show the rest of DIVs

问题描述

我有几个div，并且在一些滚动之后，第二个div将是position：fixed，并且在更多滚动之后它会回到position：static，但问题是：

第四个div将接下来不是第三个（因为它已经通过滚动，而我们在第二个div）。

如何可以我显示第二个之后的第三个div？

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

HTML：

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

CSS：

  #container {
 position：relative; 
} 
 
 .slide {
 min-height：400px; 
 height：500px; 
宽度：100％; 
 
  

jQuery：

<$ （curScrollVal>）;
$ b $（window）.scroll（function（）{
var curScrollVal = $（window）.scrollTop（）;

500&& curScrollVal< 1500）{
$（'＃d2'）.css（{'position'：'fixed'，'top'：0，'background-color'：'pink'} ）;
}
else if（curScrollVal> 1500）{
$（'＃d2'）。css（{'position'：'static'，'top'：'auto' ，'background-color'：'gray'}）;

//我如何显示div＃d3及其余部分？
}

} ）;

解决方案

不完全确定我是否理解您的意思，是我认为你要求的。

这还是这？

  $（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'}）; 
} 
 //现在我想要显示下一个div订单
 else if（curScrollVal> 1500）{
 $（'＃d2'）。css（{'position'：'static'，'top'：'auto'，'background-color' ：'gray'}）; 
 
 //如何显示div＃d3及其余部分？
} 
 
}）; 
  

I have several divs, and after some scrolling the second div will be "position:fixed" and again after some more scrolling it will be back to "position:static" but the problem is:

the 4th div will come next NOT the third (because it has passed by scrolling while we are at the 2nd div).

How can I show the third div after the 2nd one?

Here is the 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?
    }

});

解决方案

Not entirely sure if I understand what you mean BUT this is what I think you are asking for.

THIS or THIS?

$(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?
}

});

这篇关于将DIV更改为“position：fixed”然后将其改回“静态”并显示其余的DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！