Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

fixed page, content scrolling behind header

Tags:

html

css

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.

like image 980
dmikester1 Avatar asked Dec 09 '15 04:12

dmikester1

1 Answers

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>
like image 182
Noopur Dabhi Avatar answered Oct 19 '22 09:10

Noopur Dabhi
Sign in to Comment

Related questions

Nested divs producing a scrollbar. Why?
Can you select the html element or root node with nth-child?
Turning off a section of code in html with something like an if statement
Unable to override text-align: justify with text-align: left in simple HTML
Is there a way to split a div based on word wrap?
Security concerns with Mustache html templating
Getting ugly image while simulating cover in canvas
Replace hidden field value with value of NoUiSlider value to pass to form PHP
Phantom white space between 2 <li>s
Downloading flask-generated html page
How to change label color with html and CSS without js?
Display hidden content when radio button is checked using JQuery
How to merge multiple HTML files into one master HTML file
Text within a non-rectangular shape (pentagon or hexagon)
How to select text range within a contenteditable div that has no child nodes?
HTML5/Javascript calculate device speed using devicemotion/deviceorientation
How to select a frame with no name or id in robot framework?
chrome not caching js & css but caches images
Angular Material Not Locked sidebar
Passing Attributes / objects through an attribute. Javascript

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!