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

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

这里的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;}

编辑：想想像窗帘在舞台上升这个效果。舞台在幕布升起时保持原位。

来源

2012-10-28 Dustin

像jarallax http://www.jarallax.com/demo/的插件应该给你你需要的东西，虽然它需要多一点的调整你的布局。您可以在滚动过程的不同点为每个div设置动画。 – apttap

你能演示一些演示吗？它很混乱和不清楚 – Starx

我更新了我的帖子。把它想象成一个在舞台上升起的窗帘。 – Dustin

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

来源

2012-10-28 04:22:00 Starx

当我设置'。主{位置：固定}'然后它杀死滚动整个页。 – Dustin

@DustinMcGrew，你能展示你在做什么吗？ – Starx

达斯汀，根据您的滚动窗帘提

，我设置了上面摆放着主要内容区100％高度格，这样滚动页面带来的内容进入视野。我不确定你正在寻找的固定区域，所以我只是在页面顶部放置了一个固定的div。如果您希望该div在“幕布”完成之后开始滚动，您可能希望根据滚动位置查看addclass，但不幸的是，您必须更好地向某人询问Jquery for帮助。

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

来源

2012-10-28 07:18:58 Marcatectura

感谢大家对我的帮助。我想我找到了一个很好的解决方案。我发现了一个方便地命名为Curtain.js的东西。 https://github.com/Victa/curtain.js这个插件创建了我一直在寻找的完全相同的效果:)

来源

2012-10-28 13:55:22 Dustin

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

回答

相关问题