顯示DIV基於使用jQuery

總體構想顯示DIV基於使用jQuery

正如我繼續向下滾動頁面scrollTop的位置，不同的div的CSS屬性display將根據滾動距離改變從none到block。我遇到麻煩的類似例子可以看到here。隨着用戶滾動，錢包「旋轉」，這實際上只是圖像變化。另一個例子是here。

設計理論

得到scrollTop的（）號，即達到時，會改變一個div從display:none到display:block CSS屬性;
獲取包含不同圖像的不同div的ID。
設置每個特定的圖像有一個特定的scrollTop（）號碼，達到時，它的顯示設置打開。

據我所知，這是如何做到的（雖然我不是醫生，但是誰知道）。

A Fiddle

的jQuery

$(document).ready(function() { 
    function setImage(anImage, contentArea){ 
     $.when(contentArea == $(window).scrollTop()).then(function(){ 
      $(anImage).css('display', 'block'); 
     }); 
    } 
    setImage('#bg1', 200); 
    setImage('#bg2', 300); 
    setImage('#bg3', 400); 
});

我此代碼後面的想法是：

當anImage（含有圖像推崇DIV）的scrollTop()值等於contentArea（scrollTop的（）值設置爲顯示從無變爲塊時的值），然後anImage的CSS值將更改爲display:block。我並不擔心刪除之前的圖像，因爲新圖像具有更高的z-index。

HTML

<div id="content"> 
    <div id="bg1"></div> 
    <div id="bg2"></div> 
    <div id="bg3"></div> 
</div>

CSS

html,body{height:100%;margin:0;}   
#content{ 
    background:#333333; 
    height:1500px; 
    z-index:1; 
} 
#bg1{ 
    background:blue; 
    height:400px; 
    width:100%; 
    z-index:2; 
    position:fixed; 
    top:200px; 
    display:none; 
} 
#bg2{ 
    background:green; 
    height:400px; 
    width:100%; 
    z-index:3; 
    position:fixed; 
    top:400px; 
    display:none; 
} 
#bg3{ 
    background:red; 
    height:400px; 
    width:100%; 
    z-index:4; 
    position:fixed; 
    top:400px; 
    display:none; 
}

來源

2013-10-07 itsclarke

錢包的代碼在這裏。有趣的瀏覽。 http://www.bagigia.com/js/bagigia.home.rotation.js –

一旦你改變你的js使用窗口上的滾動事件，似乎工作。 – Speedy

所以看看這個小提琴：http://jsfiddle.net/6XweD/2/。

如果您發現我改變了風格，從display:none到opacity:0這樣函數$(this).height()作品，和我做的div的top位置有些adjusment。

希望這工作正常:)

來源

2013-10-07 20:37:22

顯示DIV基於使用jQuery

回答

相關問題