I did a lot of research on this but apparently it's not possible with pure html/css as position:fixed only fixes it to browser window, so I thought I'd ask in this section.
I have a page container, and inside it are two sections. The left section is a vertical nav bar with some links, while the right section is the actual page content. I want the right side to be scrollable, but the left side to be fixed to the page container (ie won't scroll when I scroll that page), but be able to move when I scroll the entire browser window.

Code:
<div id="pagecontainer">

    <div id="linkspage">

        <div class="sidelinks"> <!--UNSCROLLABLE-->
            <a href="#page1" class="link">Link 1</a>
            <p>
            <a href="#page2" class="link">Link 2</a>
            <p>
            <a href="#page3" class="link">Link 3</a>
            <p>
            <a href="#page4" class="link">Link 4</a>
            <p>
        </div>

        <div class="linkscontent"> <!--SCROLLABLE-->
            content of links page
        </div>

    </div>

    //OTHER PAGES

</div>
I've already tried to set #pagecontainer and #linkspage to position:relative, and .sidelinks to position:absolute, that doesn't do anything as far as I can tell... or it just doesn't do what I want.

Here's a picture:

fixed.png

Thanks.