jquery - 滚动时在主要内容区域顶部滚动 100% 高度 div？

Question

我想做的事情有点难以解释。我想要一个“面板”，它是窗口高度的 100%，并且覆盖在网站的主要内容之上。我想要发生的是将主要网站内容锁定到浏览器窗口的顶部，并将这个“面板”放在它的顶部。这部分很容易使用 z-index。我遇到的问题是让网站的主要内容固定在浏览器窗口的顶部，当用户仅向下滚动时，“面板”会向上滑动以显示主要部分它下面的网站。一旦面板清除了浏览器窗口的顶部，我希望网站的主要部分像往常一样滚动。我希望它由 jQuery 驱动。

这是我的 HTML:

这是一个覆盖层，需要在用户向下滚动时滑过主要内容的顶部。这是网站的主要内容。

还有一些 CSS:

html, body {height:100%;}

.panel {height:100%; background-color: rgba(186,85,85,0.38); position: relative; z-index:1;}

.main {position: absolute; top:0px; min-height: 1500px;}

编辑:将此效果想象成舞台上的幕布。当幕布升起时，舞台保持原位。

Answer 1

从过于简单的 Angular 来看这个问题，使用position: fixed可以固定主要内容网站，而其他内容滚动。