How can I get text to appear only in a div 'window' while scrolling by?

I have a long page of content. Within this content is a div. When this div scrolls by, I'd like text to appear... as if the div is a window and you are seeing the text outside. The text remains fixed as the div scrolls by. Take a look at this fiddle: http://jsfiddle.net/bcu5fab7/6/

body{
    height: 1000px;
}
div{
    position: relative;
}
#text-container {
    position: relative;
    height: 300px;
    /*width: 400px;*/
    background: cyan;
    overflow: hidden;
    width:100%;
}
#text-container .boxtext {position:fixed; top:25%; overflow:hidden; padding:0 30px;}

<div style="">
    <p>1.  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh erat, sagittis sit amet congue at, aliquam eu libero. Integer molestie, turpis vel ultrices facilisis, nisi mauris sollicitudin mauris, volutpat elementum enim urna eget odio. Donec egestas aliquet facilisis. Nunc eu nunc eget neque ornare fringilla. Nam vel sodales lectus. Nulla in pellentesque eros. Donec ultricies, enim vitae varius cursus, risus mauris iaculis neque, euismod sollicitudin metus erat vitae sapien. Sed pulvinar.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh erat, sagittis sit amet congue at, aliquam eu libero. Integer molestie, turpis vel ultrices facilisis, nisi mauris sollicitudin mauris, volutpat elementum enim urna eget odio. Donec egestas aliquet facilisis. Nunc eu nunc eget neque ornare fringilla. Nam vel sodales lectus. Nulla in pellentesque eros. Donec ultricies, enim vitae varius cursus, risus mauris iaculis neque, euismod sollicitudin metus erat vitae sapien. Sed pulvinar.</p>
</div>
    
<div id='text-container'>
    <div class="boxtext">
         <p>Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. </p>
    </div>
</div>

<div style=""> <p>2.  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh erat, sagittis sit amet congue at, aliquam eu libero. Integer molestie, turpis vel ultrices facilisis, nisi mauris sollicitudin mauris, volutpat elementum enim urna eget odio. Donec egestas aliquet facilisis. Nunc eu nunc eget neque ornare fringilla. Nam vel sodales lectus. Nulla in pellentesque eros. Donec ultricies, enim vitae varius cursus, risus mauris iaculis neque, euismod sollicitudin metus erat vitae sapien. Sed pulvinar.</p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh erat, sagittis sit amet congue at, aliquam eu libero. Integer molestie, turpis vel ultrices facilisis, nisi mauris sollicitudin mauris, volutpat elementum enim urna eget odio. Donec egestas aliquet facilisis. Nunc eu nunc eget neque ornare fringilla. Nam vel sodales lectus. Nulla in pellentesque eros. Donec ultricies, enim vitae varius cursus, risus mauris iaculis neque, euismod sollicitudin metus erat vitae sapien. Sed pulvinar.</p>
    </div>

As you can see, the text in the .boxtext div has position:fixed. But it appears on TOP of the other content. Is there a way around this problem? A way to hide the text except when the blue div scrolls by?

Solution

If you want a pure CSS implementation, you can use negative z-index's:

body{
    height: 1000px;
}
div{
    position: relative;
    background:white;/*Covers the text, or you can see it through*/
}
#text-container {
    position: relative;
    height: 300px;
    /*width: 400px;*/
    background: cyan;
    overflow: hidden;
    width:100%;
    z-index:-2;/*Places it behind everything*/
}
#text-container .boxtext {
    position:fixed; 
    top:25%; 
    overflow:hidden; 
    padding:0 30px;
    z-index:-1;/*places it behind everything except cyan div*/
    background:transparent;
}

<div style="">
    <p>1.  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh erat, sagittis sit amet congue at, aliquam eu libero. Integer molestie, turpis vel ultrices facilisis, nisi mauris sollicitudin mauris, volutpat elementum enim urna eget odio. Donec egestas aliquet facilisis. Nunc eu nunc eget neque ornare fringilla. Nam vel sodales lectus. Nulla in pellentesque eros. Donec ultricies, enim vitae varius cursus, risus mauris iaculis neque, euismod sollicitudin metus erat vitae sapien. Sed pulvinar.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh erat, sagittis sit amet congue at, aliquam eu libero. Integer molestie, turpis vel ultrices facilisis, nisi mauris sollicitudin mauris, volutpat elementum enim urna eget odio. Donec egestas aliquet facilisis. Nunc eu nunc eget neque ornare fringilla. Nam vel sodales lectus. Nulla in pellentesque eros. Donec ultricies, enim vitae varius cursus, risus mauris iaculis neque, euismod sollicitudin metus erat vitae sapien. Sed pulvinar.</p>
</div>
    
<div id='text-container'>
    <div class="boxtext">
         <p>Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. </p>
    </div>
</div>

<div style=""> <p>2.  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh erat, sagittis sit amet congue at, aliquam eu libero. Integer molestie, turpis vel ultrices facilisis, nisi mauris sollicitudin mauris, volutpat elementum enim urna eget odio. Donec egestas aliquet facilisis. Nunc eu nunc eget neque ornare fringilla. Nam vel sodales lectus. Nulla in pellentesque eros. Donec ultricies, enim vitae varius cursus, risus mauris iaculis neque, euismod sollicitudin metus erat vitae sapien. Sed pulvinar.</p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh erat, sagittis sit amet congue at, aliquam eu libero. Integer molestie, turpis vel ultrices facilisis, nisi mauris sollicitudin mauris, volutpat elementum enim urna eget odio. Donec egestas aliquet facilisis. Nunc eu nunc eget neque ornare fringilla. Nam vel sodales lectus. Nulla in pellentesque eros. Donec ultricies, enim vitae varius cursus, risus mauris iaculis neque, euismod sollicitudin metus erat vitae sapien. Sed pulvinar.</p>
    </div>

Otherwise, you have to use JS. I made a short jQuery plug-in for this once:
http://dev.debonairstudios.com/fromTop/
Only the first example works, I should really update the documentation :D