如何放置 position:fixed内容在页面背景中的容器，而其他内容在其上滚动，同时仍然保持点击背景元素的能力？
效果类似于前景内容在固定背景上滚动的视差滚动情况，但我希望能够将 HTML 放在背景中，而不仅仅是图像，并且我希望能够与那个 HTML。
具体来说，I set up a Fiddle (下面的代码)带有一系列全 Angular div我页面顶部的容器，用户可以滚动浏览，我有一个 position:fixed画廊 z-index:-1在最后一个顶部容器滚动后“显示”。继续滚动页面会显示额外的全 Angular div隐藏固定画廊的容器。
我认为在顶部容器和底部容器之间实现这种“显示”空间的唯一方法是添加一个具有像素高度的中间空容器——但这会阻止用户单击下方图库中的任何内容。另外，理想情况下，我希望该高度基于视口(viewport)高度，而不是固定的像素数。有没有更好的方法来创建相同的布局？或者此设置的解决方法？
我已经能够在 http://pro.boombotix.com 找到我想要实现的目标的示例(特别参见“防水”之前的画廊部分)。他们似乎是用 javascript 来做的，但他们有大量的代码，我很难整理。
感谢任何帮助!
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
}
.section {
width: 100%;
background-color: gray;
z-index: 0;
padding: 300px 0;
text-align: center;
}
.white { background-color: white; }
#gallery {
position: fixed;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: linen;
}
#gallery a {
width: 20%;
padding: 75px 0;
display: inline-block;
text-align: center;
}
.pink { background-color: pink; }
.blue { background-color: cyan; }
#gallery-pusher {
height: 1000px;
}
</style>
</head>
<body>
<div class="section">
<h1>Top Section 1</h1>
</div>
<div class="section white">
<h1>Top Section 2</h1>
</div>
<div id="gallery">
<a href="test.html" class="pink">Link</a><a href="test.html" class="blue">Link</a><a href="test.html" class="pink">Link</a><a href="test.html" class="blue">Link</a><a href="test.html" class="pink">Link</a><a href="test.html" class="blue">Link</a><a href="test.html" class="pink">Link</a><a href="test.html" class="blue">Link</a><a href="test.html" class="pink">Link</a><a href="test.html" class="blue">Link</a><a href="test.html" class="pink">Link</a><a href="test.html" class="blue">Link</a><a href="test.html" class="pink">Link</a><a href="test.html" class="blue">Link</a><a href="test.html" class="pink">Link</a><a href="test.html" class="blue">Link</a><a href="test.html" class="pink">Link</a><a href="test.html" class="blue">Link</a><a href="test.html" class="pink">Link</a><a href="test.html" class="blue">Link</a><a href="test.html" class="pink">Link</a><a href="test.html" class="blue">Link</a>
</div>
<div id="gallery-pusher"></div>
<div class="section">
<h1>Bottom Section 1</h1>
</div>
<div class="section white">
<h1>Bottom Section 2</h1>
</div>
</body>
</html>
最佳答案
"How can I place a position:fixed container with content in the background of a page while other content scrolls over it, while still maintaining the ability to click on the background elements?"
我会在第一个问题上停下来，并为您提供这个。忽略其他网站是如何做的，并从这个概念开始工作。如果您使用 margin-top:10px 或其他方式将可滚动内容隔开，您可以点击该空间。只是不要将可滚动内容放在与固定内容重叠的容器 div 中。试试这个。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Fixed Background Test</title>
<meta http-equiv="Content-Style-Type" content="text/css"/>
<meta http-equiv="Content-Script-Type" content="text/javascript"/>
<style type="text/css">
html {
height: 100%;
margin: 0px;
border: 0px;
padding: 0px;
}
body {
height: 100%;
margin: 0px;
border: 0px;
padding: 0px;
}
.fixed {
position: fixed;
z-index: 1;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-color: #F6E4CE;
overflow: hidden;
}
.fixed_content {
margin-top: 20px;
background-color: #808080;
height: 100px;
cursor: pointer;
}
.scrollable {
position: relative;
z-index: 2;
margin-top: 40px;
background-color: #94DD7B;
height: 100px;
}
</style>
</head>
<body>
<div class="fixed">
<div class="fixed_content" onclick="alert('Hey There!');">Click Me!</div>
<div class="fixed_content" onclick="alert('Hey There!');">Click Me!</div>
<div class="fixed_content" onclick="alert('Hey There!');">Click Me!</div>
<div class="fixed_content" onclick="alert('Hey There!');">Click Me!</div>
<div class="fixed_content" onclick="alert('Hey There!');">Click Me!</div>
<div class="fixed_content" onclick="alert('Hey There!');">Click Me!</div>
<div class="fixed_content" onclick="alert('Hey There!');">Click Me!</div>
<div class="fixed_content" onclick="alert('Hey There!');">Click Me!</div>
<div class="fixed_content" onclick="alert('Hey There!');">Click Me!</div>
</div>
<div class="scrollable">This is some fixed content.</div>
<div class="scrollable">This is some fixed content.</div>
<div class="scrollable">This is some fixed content.</div>
<div class="scrollable">This is some fixed content.</div>
<div class="scrollable">This is some fixed content.</div>
<div class="scrollable">This is some fixed content.</div>
<div class="scrollable">This is some fixed content.</div>
<div class="scrollable">This is some fixed content.</div>
<div class="scrollable">This is some fixed content.</div>
<div class="scrollable">This is some fixed content.</div>
<div class="scrollable">This is some fixed content.</div>
<div class="scrollable">This is some fixed content.</div>
<div class="scrollable">This is some fixed content.</div>
<div class="scrollable">This is some fixed content.</div>
<div class="scrollable">This is some fixed content.</div>
<div class="scrollable">This is some fixed content.</div>
<div class="scrollable">This is some fixed content.</div>
<div class="scrollable">This is some fixed content.</div>
<div class="scrollable">This is some fixed content.</div>
</body>
</html>
关于javascript - 隐藏/显示位置 :fixed container under non-fixed containers，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38405746/