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

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