隐藏内容滚动

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的顶部。