【发布时间】：2015-12-09 04:16:04
【问题描述】：
我正在开发一个网站。我已经修复了大部分页面，除了我希望中间的表格与主滚动条一起滚动。然后我在背景中有一张我想部分显示的图像。我大部分时间都在工作。我无法弄清楚的唯一部分是如何让表格内容落后甚至在到达标题时停止。我将包括一个小提琴，这样你就可以看到我在说什么。 HTML：
<body>
<div id="background"></div>
<div id="tableBackground"></div>
<div id="fixedHeader">
<h1>fixed header</h1>
<h2>Subheading</h2>
</div>
<div id="tableContainer">
<table class="stocks compact display cell-border">
<tr><td>row 1 cell 1</td><td>row 1 cell 2</td></tr>
<tr><td>row 2 cell 1</td><td>row 2 cell 2</td></tr>
<tr><td>row 3 cell 1</td><td>row 3 cell 2</td></tr>
<tr><td>row 4 cell 1</td><td>row 4 cell 2</td></tr>
<tr><td>row 5 cell 1</td><td>row 5 cell 2</td></tr>
<tr><td>row 6 cell 1</td><td>row 6 cell 2</td></tr>
<tr><td>row 7 cell 1</td><td>row 7 cell 2</td></tr>
<tr><td>row 8 cell 1</td><td>row 8 cell 2</td></tr>
<tr><td>row 9 cell 1</td><td>row 9 cell 2</td></tr>
<tr><td>row 10 cell 1</td><td>row 10 cell 2</td></tr>
<tr><td>row 11 cell 1</td><td>row 11 cell 2</td></tr>
<tr><td>row 12 cell 1</td><td>row 12 cell 2</td></tr>
<tr><td>row 13 cell 1</td><td>row 13 cell 2</td></tr>
<tr><td>row 14 cell 1</td><td>row 14 cell 2</td></tr>
<tr><td>row 15 cell 1</td><td>row 15 cell 2</td></tr>
<tr><td>row 16 cell 1</td><td>row 16 cell 2</td></tr>
<tr><td>row 17 cell 1</td><td>row 17 cell 2</td></tr>
<tr><td>row 18 cell 1</td><td>row 18 cell 2</td></tr>
<tr><td>row 19 cell 1</td><td>row 19 cell 2</td></tr>
<tr><td>row 20 cell 1</td><td>row 20 cell 2</td></tr>
<tr><td>row 21 cell 1</td><td>row 21 cell 2</td></tr>
<tr><td>row 22 cell 1</td><td>row 22 cell 2</td></tr>
<tr><td>row 23 cell 1</td><td>row 23 cell 2</td></tr>
<tr><td>row 24 cell 1</td><td>row 24 cell 2</td></tr>
<tr><td>row 25 cell 1</td><td>row 25 cell 2</td></tr>
<tr><td>row 26 cell 1</td><td>row 26 cell 2</td></tr>
<tr><td>row 27 cell 1</td><td>row 27 cell 2</td></tr>
<tr><td>row 28 cell 1</td><td>row 28 cell 2</td></tr>
<tr><td>row 29 cell 1</td><td>row 29 cell 2</td></tr>
<tr><td>row 30 cell 1</td><td>row 30 cell 2</td></tr>
<tr><td>row 31 cell 1</td><td>row 31 cell 2</td></tr>
<tr><td>row 32 cell 1</td><td>row 32 cell 2</td></tr>
<tr><td>row 33 cell 1</td><td>row 33 cell 2</td></tr>
<tr><td>row 34 cell 1</td><td>row 34 cell 2</td></tr>
<tr><td>row 35 cell 1</td><td>row 35 cell 2</td></tr>
<tr><td>row 36 cell 1</td><td>row 36 cell 2</td></tr>
<tr><td>row 37 cell 1</td><td>row 37 cell 2</td></tr>
<tr><td>row 38 cell 1</td><td>row 38 cell 2</td></tr>
<tr><td>row 39 cell 1</td><td>row 39 cell 2</td></tr>
<tr><td>row 40 cell 1</td><td>row 40 cell 2</td></tr>
<tr><td>row 41 cell 1</td><td>row 41 cell 2</td></tr>
<tr><td>row 42 cell 1</td><td>row 42 cell 2</td></tr>
<tr><td>row 43 cell 1</td><td>row 43 cell 2</td></tr>
<tr><td>row 44 cell 1</td><td>row 44 cell 2</td></tr>
<tr><td>row 45 cell 1</td><td>row 45 cell 2</td></tr>
<tr><td>row 46 cell 1</td><td>row 46 cell 2</td></tr>
</table>
</div>
</body>
CSS：
html {
background: url(http://oi65.tinypic.com/29dhf6g.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
html,body{
margin: 0;
padding: 0;
}
#background {
position: fixed;
top: 0;
left: 0;
z-index: -10;
width: 100%;
height: 100%;
}
#tableBackground {
position: fixed;
width: 90%;
height: 100%;
max-width: 1200px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.8);
left: 0;
right: 0;
z-index: 0;
}
#fixedHeader {
position: fixed;
left: 50%;
top: 0;
margin-left:-600px;
width: 1200px;
height: 80px;
z-index: 10;
}
#tableContainer {
position: relative;
top: 80px;
width: 1200px;
margin: 0 auto;
}
.stocks {
margin: 20px auto;
}
h1 {
font-size: 1.4em;
text-align: center;
}
h2 {
font-size: 1.2em;
text-align: center;
}
这是我的fiddle，所以你可以看到我在描述什么。向上滚动时，您可以看到表头后面显示的表格内容。我希望它在到达标题时隐藏。
【问题讨论】：
-
为#fixedHeader 提供背景颜色
-
@user，它在通过标题后仍然显示，我不想在标题上设置背景颜色，这样我就可以通过它看到我的图像。
-
如果没有
iframe或javascript或将标题 div 的不透明度设置为小于 100%，您真的无法做到这一点