滚动时在主要内容区域顶部滚动 100% 高度的 div？答案

【问题标题】：Scroll a 100% height div over top of main content area while scrolling?滚动时在主要内容区域顶部滚动 100% 高度的 div？
【发布时间】：2012-10-28 04:14:30
【问题描述】：

我想要做的有点难以解释。我想要一个“面板”，它将是窗口高度的 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;}

编辑：把这种效果想象成舞台上的幕布。幕布升起时，舞台保持原位。

【问题讨论】：

像 jarallax jarallax.com/demo 这样的插件应该可以满足您的需求，尽管它需要对您的布局进行更多调整。您可以在滚动进度的不同点为每个 div 设置动画。
你能演示一下吗？它相当混乱和不清楚
我更新了我的帖子。把它想象成舞台上的幕布。
他们提供视频教程，逐步展示插件的实现：jarallax.com/?page=tutorial

标签： jquery css scroll

【解决方案1】：

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

【讨论】：

当我设置 .main {position:fixed} 然后它会杀死整个页面的滚动。

【解决方案2】：

达斯汀，

基于您提到的滚动窗帘，我设置了一个 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

【讨论】：

【解决方案3】：

感谢大家为帮助我所做的努力。我想我找到了一个很好的解决方案。我发现了一个名为 Curtain.js 的东西。 https://github.com/Victa/curtain.js 这个插件创建的效果和我一直在寻找的一样:)

【讨论】：