隐藏背景之外的内容并在滚动时显示

Question

工作网址： http://webstage.co/scroll/stack.html

我想要完成的是在内容超出背景区域（1280x800）时隐藏内容。当我滚动到一个新的部分时，我喜欢背景进入的方式，但我想隐藏内容，直到它进入1280x800视口？关于如何实现这一目标的任何建议？

Bonus ...如果我也可以隐藏顶部导航下的内容，一旦它在它下面向上滚动，那将是很棒的。一个人可以做梦。 ：）

谢谢！

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