Scroll content inside a fixed div relative to the page

I'm making myself a portfolio website, and I'm wondering how to scroll the content inside a fixed div relative to the scrolling of the page.

I've tried placing an absolute div over the fixed div, but then all the content doesn't stay inside the fixed div, and trying inside the fixed div means the content stays still, and I don't want to add a separate scroll bar.

http://jsfiddle.net/wef2buyh/1/

<div class = "title">
    <h1 style = "font-size: 200%;">A Portfolio</h1>
    <h1 >Barney</h1>
</div> 


<div class = "main" id = "mainDiv">
     <div id = "innerDiv" class = "fixed" style="height:1500px;background-color: rgb(255, 255, 255);font-size:36px; transform: translate(0%, 500px)">
    </div>
</div>

<div style = "size: 100%; position: absolute; top: 1000px; left: 20px; overflow: hidden; clip: rect(10px, scrollY ,2px, 100%); background-attachment: fixed" id = "div">
        <p id = "scrollable">Text, blah blah. </p>
</div>

I'm expecting the text to inside the white box, but instead, it flows out of it.