how to have content disappear/hidden behind transparent header while scrolling - html

Question

I created a js fiddle http://jsfiddle.net/claireC/8SUmn/ with a fixed header that is transparent.
When I scroll, you're able to see the text scrolling up behind it. How can I have the text disappear or hidden behind the transparent div on scroll.
edit: Forgot to mention that the background is an image.
Note: I am a beginner in coding. This is me playing around with code and trying to figure things out.
Here's my html:
<div class="container">
<header>
<ul>
<li>list one</li>
<li>list3 </li>
<li>list2</li>
</ul>
</header>
<div class="text">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce placerat sapien eget ligula egestas, quis aliquam velit varius. Phasellus mollis mollis sem quis porttitor. Pellentesque scelerisque mauris et magna tincidunt, vel pharetra enim pharetra. Duis a lobortis purus. Sed dignissim fermentum nibh convallis eleifend. In quis interdum arcu. Proin interdum, lorem et luctus laoreet, felis purus pharetra turpis, eu egestas justo ligula in lectus. Morbi vitae libero vel velit posuere luctus at eu diam. Duis tincidunt lectus ut lobortis euismod. Vivamus ultrices tristique sapien eget posuere.
</p>
</div>
Css:
header{
width: 100%;
position: fixed;
top: 0;
border: 1px solid #000;
}
.text{
border: 1px solid #fff;
position: relative;
margin-top: 150px;
}
p{
font-size: 150px;
}

Answer 1

If you are ok with setting the header height, you can use position:absolute and overflow:auto to get the result
Demo

Answer 2

I found another solution, CSS only:
make a container div with your background
have the header transparant and height set to 10vh
have the body height set to 90vh and overflow to auto
Sorry, it's React/MaterialUI, but you'll get the gist:
const classes = theme => ({
container: {
fontFamily: 'Roboto,"Helvetica Neue",Arial,sans-serif',
margin: 0,
padding: 0,
minHeight: '100%',
backgroundImage: 'url(/cargo-background.jpg)',
backgroundSize: 'cover',
backgroundAttachment: 'fixed',
}
})
<div className={classes.container}>
<div style={{height: '12vh'}}>
<AppBar/>
</div>
<div style={{height: '88vh', overflow: 'auto'}}>
<Routes/>
</div>
</div>
More on vh (viewport units):
https://caniuse.com/#feat=viewport-units

Answer 3

Assuming your header is going to be like a sticky menu, that shows the background image underneath - I think it will be a lot easier to achieve without the text actually behind your header/menu. Instead you're better off doing a fixed layout IMO, here's an example:
There is a full screen container to start the fixed layout, and inside a header, and content section. You can use flexbox here to make the content section fill the space but not overflow, while the header height is based on the header contents (so no, you don't have to set height on the header as people are saying).
.container {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
background: ghostwhite;
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
header.menu {
border: 1px solid #000;
}
section.text {
border: 1px solid #fff;
overflow-y: scroll
}
<div class="container">
<header class="menu">
<ul>
<li>list one</li>
<li>list3 </li>
<li>list2</li>
</ul>
</header>
<section class="text">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce placerat sapien eget ligula egestas, quis aliquam velit varius. Phasellus mollis mollis sem quis porttitor. Pellentesque scelerisque mauris et magna tincidunt, vel pharetra enim pharetra.
Duis a lobortis purus. Sed dignissim fermentum nibh convallis eleifend. In quis interdum arcu. Proin interdum, lorem et luctus laoreet, felis purus pharetra turpis, eu egestas justo ligula in lectus. Morbi vitae libero vel velit posuere luctus at
eu diam. Duis tincidunt lectus ut lobortis euismod. Vivamus ultrices tristique sapien eget posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce placerat sapien eget ligula egestas, quis aliquam velit varius. Phasellus mollis mollis
sem quis porttitor. Pellentesque scelerisque mauris et magna tincidunt, vel pharetra enim pharetra. Duis a lobortis purus. Sed dignissim fermentum nibh convallis eleifend. In quis interdum arcu. Proin interdum, lorem et luctus laoreet, felis purus
pharetra turpis, eu egestas justo ligula in lectus. Morbi vitae libero vel velit posuere luctus at eu diam. Duis tincidunt lectus ut lobortis euismod. Vivamus ultrices tristique sapien eget posuere.
</p>
</section>
</div>