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

Question

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

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

奖励......如果我也可以在顶部导航下方滚动内容时也将其隐藏起来，那就太好了。一个人可以做梦。:)

谢谢！

Answer 1

对于第一部分，您可以使用 css 添加另一个 div 和目标，如下所示：

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