Fixed position relative to parent container

[windbrand]

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.

<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:



Thanks.

[molendijk]

You mean something like the following?

<div style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; background: #dedede">

<div style="position: absolute; left: 80px; top:2%; width:18%; bottom: 2%; border: 2px solid black; padding: 10px; z-index:1; background: white; overflow: auto">
link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>link<br>
</div>

<div style="position: absolute; left:20%;margin-left:100px; right: 60px; top:2%; bottom: 2%; border: 2px solid black; padding: 10px; background: white; z-index:1;overflow: auto">
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
</div>

main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>main window<br>

</div>

[windbrand]

You're basically separating the nav bar and page content into separate divs directly on the .pagecontainer div. It will work but only because they're completely unrelated to each other... But the format of my page is #pagecontainer -> #linkspage, then inside #linkspage there are two divs .sidelinks and #linkscontent. I need to keep the nav bar and page content inside the same div because they're on the same page, and it's easier to fade it in/out when I just call:

$('linkspage').fadeIn();

Instead of

$('.sidelinks').fadeIn();
$('#linkscontent').fadeIn();

That will be very messy treating .sidelinks and #linkscontent as two separate pages.

[molendijk]

I don't see the problem, sorry. Can you give me a demo of the problematic page(s)?

[windbrand]

The problem is I've got like 30 pages. If I separate each nav bar into its own page the code will be extremely messy.

Instead of:

<div id="pagecontainer">

    <div id="page1">

        <div class="sidelinks"> <!--UNSCROLLABLE-->
            //links for page 1
        </div>

        <div class="pagecontent"> <!--SCROLLABLE-->
            content of page 1
        </div>

    </div>

    <div id="page2">

        <div class="sidelinks"> <!--UNSCROLLABLE-->
            links for page 2
        </div>

        <div class="pagecontent"> <!--SCROLLABLE-->
            content of page 2
        </div>

    </div>

    <div id="page3">

        <div class="sidelinks"> <!--UNSCROLLABLE-->
            links for page 3
        </div>

        <div class="pagecontent"> <!--SCROLLABLE-->
            content of page 3
        </div>

    </div>

    <div id="page4">

        <div class="sidelinks"> <!--UNSCROLLABLE-->
            links for page 4
        </div>

        <div class="pagecontent"> <!--SCROLLABLE-->
            content of page 4
        </div>

    </div>

</div>

Which clearly nests each page within #pagecontainer, and each page's contents within #page,
If I separate each navbar into a different page I'll end up with:

<div id="pagecontainer">

    <div id="page1">

        <div class="pagecontent"> <!--SCROLLABLE-->
            content of page 1
        </div>

    </div>

    <div id="page2">

        <div class="pagecontent"> <!--SCROLLABLE-->
            content of page 2
        </div>

    </div>

    <div id="page3">

        <div class="pagecontent"> <!--SCROLLABLE-->
            content of page 3
        </div>

    </div>

    <div id="page4">

        <div class="pagecontent"> <!--SCROLLABLE-->
            content of page 4
        </div>

    </div>

    <div class="sidelinks" id="page1links"> <!--UNSCROLLABLE-->
        //links for page 1
    </div>

    <div class="sidelinks" id="page2links"> <!--UNSCROLLABLE-->
        //links for page 2
    </div>
    
    <div class="sidelinks" id="page3links"> <!--UNSCROLLABLE-->
        //links for page 3
    </div>
   
    <div class="sidelinks" id="page4links"> <!--UNSCROLLABLE-->
        //links for page 4
    </div>

</div>

The navbar links would have the same hierarchy as the pages themselves. With 30+ pages this would get extremely messy and confusing, as the navbar should be a child div of the page, not a completely independent div.

When I fade in a page, instead of simply calling:

$('#page1').fadeIn();

Now I'll need to remember to both the page and the navbar assigned to that page:

$('#page1,#page1links').fadeIn();

[molendijk]

It is not required to write down the page links for every page.
I created something for you that does what you want (I guess), see this.
I left out certain things (like your classes) because they are not needed in the basic script.
If this is not what you want, just tell me exactly what you need.
I did not take into account your jquery lines.

[windbrand]

I need the links on each page because it's different for each page. On page 1 the links might be "a" "b" "c" "d", on page 2 it would be "x" "y" "z".

[molendijk]

I need the links on each page because it's different for each page. On page 1 the links might be "a" "b" "c" "d", on page 2 it would be "x" "y" "z".

Then once you have "x" "y" "z" to the left (in a fixed position), how would you ever get back to "a", or "b", etc.?

[windbrand]

Because the links don't link to each other, they link to sub-pages for each page. For example on page 1 I might have links that link to page 1-a, page 1-b, page 1-c, the links on page 2 might be 2-a, 2-b, 2-c.

[molendijk]

Because the links don't link to each other, they link to sub-pages for each page. For example on page 1 I might have links that link to page 1-a, page 1-b, page 1-c, the links on page 2 might be 2-a, 2-b, 2-c.

That does not resolve the problem (= once you have "x" "y" "z" to the left (in a fixed position), how would you ever get back to "a", or "b", etc.?). It can only be solved by adding links for "a", or "b", etc. in the sub-pages for "x" "y" "z". If that's what you want, it can be done.