static top navigation with the content hiding behind it on scroll - html

Question

Here is a fiddle as to what I am trying to accomplish: http://jsfiddle.net/60h84j7u/
I want the copy to hide below the top-nav div. I can accomplish this if the background is set to something other than transparent but in this case, the background for top-nav needs to be transparent.
HTML
<div class="wrapper">
<div class="top-nav">This needs to be at top</div>
<div class="copy"><p>This needs to hide below the top-nav as the user scrolls thru the page.</p></div>
</div>
CSS
.wrapper {
width: 500px;
height: 200px;
/*border: 1px solid purple;*/
}
.top-nav {
position: fixed;
top: 0;
border: 1px solid red;
background: transparent;
}
.copy {
position: relative;
top: 40px;
border: 1px solid green;
overflow: hidden;
}

Answer 1

I believe this to be impossible if you want the scrollbar to be on the edge of the browser, unless you change your design decision to make the top-nav transparent and do something else, such as adding a background colour or background image that shows the same thing.
If you add 2 fixed containers* around the scrollable part of your page, set their height to something < 100% and position them under your top-nav, you can set the outer container to hide overflow, and set the inner container to scroll on the y-axis. This does not really yield great results.
<div class="wrapper">
<div class="top-nav">This needs to be at top</div>
<div id="outercontainer">
<div id="innercontainer">
<div class="copy"><p>This needs to hide below the top-nav as the user scrolls thru the page.</p></div>
</div>
</div>
</div>
with css:
.outercontainer {
position: fixed;
top: 40px;
height: 90%;
width: 100%;
overflow: hidden;
}
.innercontainer {
position: fixed;
height: 90%;
width: 100%;
overflow-y: scroll;
}
* tested in Internet Explorer 11. Might horribly break in anything else