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

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

Answer 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。窗帘是红色的，内容区域是蓝色，粘性区域是绿色的，以保持区别清晰。

-Marcatectura

Answer 3

感谢大家帮助我的努力。我想我找到了一个非常好的解决方案。我发现了一些名为Curtain.js的东西。 https://github.com/Victa/curtain.js此插件创建与我正在寻找的完全相同的效果：）

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

3 个答案: