I am working on a website. I have most of the page fixed, except I want the table in the middle to scroll with the main scrollbar. Then I have an image in the background that I want to partially show through. I have it mostly working. The only part I cannot figure out is how to get the table content to go behind or even stop when it gets to the header. I will include a fiddle so you can see what I am talking about. 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;
}
And here is my fiddle so you can see what exactly I am describing. You can see the table content shows behind the header when it scrolls up. I want it to hide when it gets to the header.
CSS:
html,
body {
margin: 0;
padding: 0;
}
#background {
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;
position: fixed;
top: 0;
left: 0;
z-index: -10;
width: 100%;
height: 100%;
}
#tableBackground {
position: fixed;
top: 30px;
width: 90%;
height: 100%;
max-width: 1200px;
background: rgba(255, 255, 255, 0.8);
left: 0;
right: 0;
z-index: 0;
margin: 0 auto;
}
#fixedHeader {
position: fixed;
overflow: hidden;
left: 50%;
top: 30px;
margin-left: -600px;
width: 1200px;
height: 80px;
z-index: 10;
}
#tableContainer {
height: 80%;
overflow: auto;
position: fixed;
top: 120px;
width: 100%;
margin: 0 auto;
}
.stocks {
margin: 20px auto;
}
h1 {
font-size: 1.4em;
text-align: center;
}
h2 {
font-size: 1.2em;
text-align: center;
}
Here is working fiddle.
html,
body {
margin: 0;
padding: 0;
}
#background {
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;
position: fixed;
top: 0;
left: 0;
z-index: -10;
width: 100%;
height: 100%;
}
#tableBackground {
position: fixed;
top: 30px;
width: 90%;
height: 100%;
max-width: 1200px;
background: rgba(255, 255, 255, 0.8);
left: 0;
right: 0;
z-index: 0;
margin: 0 auto;
}
#fixedHeader {
position: fixed;
overflow: hidden;
left: 50%;
top: 30px;
margin-left: -600px;
width: 1200px;
height: 80px;
z-index: 10;
}
#tableContainer {
height: 80%;
overflow: auto;
position: fixed;
top: 120px;
width: 100%;
margin: 0 auto;
}
.stocks {
margin: 20px auto;
}
h1 {
font-size: 1.4em;
text-align: center;
}
h2 {
font-size: 1.2em;
text-align: center;
}<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>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments