我正在制作一个网站。除了想要在主滚动条中滚动中央的表格，我已经基本固定了页面。然后我在背景上有一张图片，想部分显示出来。我已经基本实现了这个需求。唯一无法解决的问题是如何让表格内容在到达页眉时停止或者放到页眉后面。我会附上一个代码片段，让您看到我所说的问题。 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;
}
以下是我的示例代码，您可以查看我所描述的内容。当页面滚动时，表格中的内容会出现在页眉后面。我想让它在到达页眉时隐藏。
Google Chrome
iframe或javascript的情况下完成这个任务，或者将头部div的不透明度设置小于100%。 - Cup of Java