將DIV更改爲「position：fixed」，然後將其更改回「static」並顯示DIV的其餘部分

我有幾個div，並且在一些滾動之後，第二個div將是「position：fixed」滾動它將回到「位置：靜態」，但問題是：將DIV更改爲「position：fixed」，然後將其更改回「static」並顯示DIV的其餘部分

第四個div將接下來不是第三個（因爲它已通過滾動，而我們在第二個div）。

如何顯示第二個之後的第三個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? 
    } 

});

來源

2014-02-27 javidhb

不完全確定，如果我明白你的意思，但這是我想你所要求的。

THIS或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? 
} 

});

來源

2014-02-27 10:08:47

不要雙擊後請 – AzDesign

太感謝你了..這正是我一直在尋找。 – javidhb

在那個小提琴中，爲什麼div 1不顯示當我滾動到頂部？ –

有7個div，每個div有500px的高度。意味着在1001PX 3格開始，而你的條件是

"curScrollVal > 500 && curScrollVal < 1500"

可以被翻譯成

"more than 1st div and less than 4th div"

意義，第二個格將通過1格之後纔出現的靜態和粉紅色第四格開頭

這就是你跳過第三格的原因。另外，您應該使用> =而不是>作爲開始條件，您將跳過相應div的1個像素。這個效果只會在500px的窗口顯着。

這裏是正確的修復jsfiddle

來源

2014-02-27 10:28:54 AzDesign

將DIV更改爲「position：fixed」，然後將其更改回「static」並顯示DIV的其餘部分

回答

相關問題