向下滾動頁面以顯示背後的內容時滑動div

我正在尋求在網站http://icscreative.com/#home上實現效果。當您滾動到站點的頂部時，出現一個帶有背景圖像的div並覆蓋整個屏幕。然後，當您向下滾動時，它會擡起，露出它背後的內容，它不會向上滾動，而只是停留在它後面。向下滾動頁面以顯示背後的內容時滑動div

我很難理解這是如何實現的。到目前爲止，我已經創建了一個名爲.mainContent的相對位置的div，其中包含我的內容，有幾段。我在裏面放了一個名爲.slide的絕對位置的div，它有一個背景圖像，並且頂部和左側都是0，以覆蓋整個.mainContent div。

我想jQuery正在使用，但我不知道如何。我最初的想法是視差，但同時我不希望文本從屏幕底部向上滾動，我希望它保留在.slide div後面。這是純粹的CSS？

在此先感謝。

Raheel K.

編輯：這是我到目前爲止。 #blogHeader確實顯示在#blog上，但是當向下滾動時，兩個div一起移動，並且一個停留在另一個之上。另外，我改變了選擇器的名字。

HTML

<div id="blog"> 

<div id="blogHeader"></div> 

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia ultrices commodo. Pellentesque dictum consequat nulla, quis elementum ante ornare vel. Nunc non lacus eget diam rutrum tincidunt. Suspendisse vel turpis est. Nulla sit amet libero tellus. Etiam consequat quam rhoncus mauris cursus porta. In hac habitasse platea dictumst. Aliquam sollicitudin aliquet enim nec blandit. Vivamus faucibus, justo mattis euismod porttitor, metus tellus pulvinar velit, ac rutrum urna lorem id magna. Vestibulum diam lectus, pharetra nec pulvinar a, imperdiet at magna. Ut a pellentesque elit.</p> 

</div>

CSS

#blogHeader{ 
    position: absolute; 
    width:100%; 
    height: 700px; 
    background:url(media/images/image.jpg) no-repeat fixed 50% 50%; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    z-index: 1; 
} 

#blog{ 
    position: relative; 
    z-index: 0; 
}

編輯2：過帳的jsfiddle給的什麼，我試圖做一個更好的主意，我有這個問題。 http://jsfiddle.net/rHg9d/

來源

2013-07-24 Raheel Khan

只是讓你知道在該網站上滾動對我來說是非常緩慢的。也許你需要優化一些。 –

您想要調整每個零件的z-索引。如果你在他們的網站上「檢查元素」，你會注意到他們有一個類名爲「窗簾」的div。每個「幕」都是您翻閱的不同部分。您還會注意到背景中的飛艇圖片的z-index爲1，滾動頁面的所有內容都有z-index 3，這意味着它們位於blimp div的「頂部」。 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index

我可以發佈一個例子，如果不明確。

來源

2013-07-24 22:07:54

我明白z-index，但如果你可以發表一個例子，它將不勝感激。另外，請參閱我的編輯原始帖子。 –

該效果有時稱爲「視差」。實際上它非常簡單，可以單獨使用CSS來完成，但JS會加強它。基本的想法是在div上設置背景圖像並將其位置設置爲fixed。

background: url(img.jpg) no-repeat fixed 50% 50%;

這裏有一個簡單的演示：http://www.pmob.co.uk/temp/parrallax2.htm

在你聯繫，不過，他們不使用這種方法的網站的情況下，但純JS方法。從快速一瞥，他們可能會使用Scrollax：https://github.com/karlbright/scrollax

來源

2013-07-24 22:09:17

拉爾夫，我用你提出的方法，它運作良好，但我也需要div移動，而它後面的那個保持原位。請在原文中查看我的編輯。 –

你可能會發佈一個你到目前爲止的jsFiddle嗎？也許更詳細地描述你想要什麼，因爲我現在沒有清晰的圖像。 –

這是jsFiddle。我需要帶有背景圖片的div在向下滾動時移動以顯示其背後的div的內容。 http://jsfiddle.net/rHg9d/ –

向下滾動頁面以顯示背後的內容時滑動div

回答

相關問題