2013-09-24 29 views
-1

我試圖複製看到此頁面上的效果的DIV的頂部一個div:http://www.falve.co.nz/collection/滾動在上述

當你滾動頁面較深的英雄節下方滾動的白色部分過頂的頂部英雄部分,就像一個窗簾。

我該如何複製這個?這是一個jQuery的東西或CSS位置的東西?真的不確定如何處理這個?

+0

jQuery來拯救!只需將文檔的'.scrollTop()'位置以數學方式以平滑的方式重新排列其他文檔。 – CP510

+0

@ CP510我不是在淡入或淡出頂部部分上方滾動的底部部分的滾動運動之後。任何想法我可以做到這一點? – egr103

回答

0

如果您使用position:fixedposition : absolute,您可以創建內容通過圖像背景之上的效果。在捕獲滾動事件時,有一些jQuery效果來管理文本的​​。

<body> 
    <div id="top"> 
    </div> 
    <div id="content"> 
    </div> 
</body> 

CSS

#top{ 
    position:fixed; 
    height : 200px; 
    width : 100%; 
    background-image:url("http://www.falve.co.nz/site/uploads/2012/09/1500x900-collection-page-image.jpg"); 
    background-size:cover; 
    z-index:1; 
} 

#content{ 
    position:absolute; 
    height : 2000px; 
    margin-top:200px; 
    width : 100%; 
    background-color:#F99; 
    z-index:2; 
} 

您對http://jsfiddle.net/UVWdg/

+0

你能分享任何類型的代碼示例讓我開始?我更願意使用jQuery – egr103

+0

試試這個插件:http://johnpolacek.github.io/scrolldeck.js/decks/parallax/ –

+0

我已經添加了一個例子來開始開發。 –