我想要做的有点难以解释。我想要一个“面板”，它将是窗口高度的 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;}
编辑：把这种效果想象成舞台上的幕布。幕布升起时，舞台保持原位。
达斯汀，
根据您提到的滚动窗帘，我在主要内容区域上方设置了一个 100% 高度的 div，以便滚动页面可以看到内容。我不确定您要查找的固定区域，所以我只是在页面顶部放置了一个固定 div。如果您希望该 div 在“窗帘”一直向上滚动时开始滚动，您可能需要根据滚动位置查看 addclass - 不幸的是，您必须向精通 Jquery 的人询问帮助。
CSS：
html, body
{
height: 100%;
background-color: yellow;
}
#curtain {
height: 100%;
width: 500px;
background-color: red;
display: block;
}
#content {
width: 500px;
background-color: blue;
}
#both {
height: 100%;
width: 500px;
margin-left: auto;
margin-right: auto;
}
#sticky_content {
position: fixed;
top: 0px;
left: 50%;
width: 200px;
background-color: green;
}
HTML :
<div id="both">
<div id="sticky_content">This Sticks</div>
<div id="curtain">Text?</div>
<div id="content">This is where the main page body content would go...</div>
</div>
这是我放在一起的JsFiddle 。窗帘为红色，内容区域为蓝色，粘性区域为绿色，以保持区分清晰。
-Marcectura
感谢大家为帮助我所做的努力。我想我找到了一个很好的解决方案。我发现了一个名为 Curtain.js 的东西。https://github.com/Victa/curtain.js这个插件创建了我一直在寻找的完全相同的效果:)
从过于简单的角度来看这个问题，使用position: fixed可以修复主要内容网站，而其他人滚动。