A fixed div within a container

Question

So I have the following:

<div id="TwoColumns">

    <div id="LeftColumn">
        <div id="navigation">
            /*This is a fixed navigation*/
            Anchor link here to PointOne
            Anchor link here to PointTwo
            Anchor link here to PointThree
        </div>
    </div>

    <div id="RightColumn>
        <div id="PointOne">
            Point One
        </div> 
        <div id="PointTwo">
            Point Two
        </div> 
        <div id="PointThree">
            Point Three
        </div> 
    </div>

</div>

1) What I want to do is when a user scrolls the navigation moves within the LeftColumn and follows the user down as a fixed element usually would but strictly within container only.

2) When a anchor link is clicked reposition navigation to be inline with relevant Point.

So what I am doing is setting top:0; for navigation when anchor link is clicked, the issue with doing this is that when I scroll to the top the fixed div now leaves it's container which is LeftColumn .

I don't mind using javascript and jquery.

UPDATE

Ok so Oswaldo Acauan html/css solution gets my 1st point ticked off.

The second issue still is an issue. When I click on link the navigation is not in-line with content on the right hand side.

I am getting WRONG at the moment and would like the CORRECT vision. I can't for the life of me figure it out.

http://jsfiddle.net/BbAck/1/

Answer 1

You can try Scrollspy by TwitterBootstrap, or do it with CSS/HTML and a little bit of Javascript/jQuery.

Demo HERE

HTML:

<div id="Container">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div id="TwoColumns">

    <div id="LeftColumn">
        <div id="navigation">
            This should be in line with the top of the point
            <a href="#PointOne">Anchor link here to PointOne</a>
            <a href="#PointTwo">Anchor link here to PointTwo</a>
            <a href="#PointThree">Anchor link here to PointThree</a>
        </div>
    </div>

    <div id="RightColumn">
        <div id="PointOne">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div> 
        <div id="PointTwo">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div> 
        <div id="PointThree">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div> 
    </div>

</div>

​ CSS:

html,body { height: 100%; }

#Container { overflow: hidden; }

#LeftColumn {
    float: left;
    width: 50%;
}

#navigation.fix {
    position: fixed;
    top: 0;
}

#navigation a {
    display: block; 
}

#RightColumn {
    width: 50%;
    float: right;
}

#PointOne { 
    background-color: red;
    height: 159px;
}

#PointTwo { 
    background-color: green;
    height: 400px;
}

#PointThree { 
    background-color: purple;
    height: 650px;
}

​ JS:

$(window).scroll(function() {
    yOffset = window.pageYOffset;
    yContainer = $('#Container').height() - $('#RightColumn').height();
    if (yOffset >= yContainer) {
        $('#navigation').addClass('fix');
    } else {
        $('#navigation').removeClass('fix');
    }
});​