隱藏內容滾動

Question

工作URL時： http://webstage.co/scroll/stack.html

我試圖做到的是隱藏的內容時，它是背景區域（1280×800）之外。當您滾動到新的部分時，我喜歡背景進入的方式，但是我想隱藏內容直到它進入該1280x800視口？有關如何完成此任務的任何建議？

獎勵......如果我還可以將頂部導航下的內容隱藏起來，那麼它將會很棒。一個人可以做夢。 :)

謝謝！

Answer 1

對於您可以添加其他的div和目標與CSS這樣的第一部分：

.viewport { 
    width: 1280px; 
    height: 100%; 
    position: fixed; 
    top: 0; 
    left: 50%; 
    margin-left: -640px; 
    background: black; 
    clip: rect(800px, 1280px, auto, auto); 
} 

基本上，將背景設置爲相同的顏色和網頁背景，用夾子只顯示部分位於所需視口區域下方的div隱藏視口區域外的內容。

如果稍後將內容添加到頁腳，您可能需要調整一些z-index設置，以確保它位於視口div的頂部。