容器內的固定div

Question

所以我有以下內容：

<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）我想要做的是當用戶在LeftColumn中滾動導航移動並作為固定元素跟隨用戶時，通常只在容器內。

2）單擊錨鏈接時，重新定位導航以與相關點內聯。

所以我正在做的是設置top:0; 對於單擊錨鏈接時的navigation ，這樣做的問題是，當我滾動到頂部時，固定div現在離開它的容器，即LeftColumn 。

我不介意使用javascript和jquery。

UPDATE

好的Oswaldo Acauan html / css解決方案獲得了我的第一點。

第二個問題仍然是一個問題。 當我點擊鏈接時，導航與右側的內容不一致。

我現在變得WRONG了，並且想要CORRECT願景。 我不能為我的生活弄清楚。

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

Answer 1

您可以通過TwitterBootstrap嘗試Scrollspy ，或者使用CSS / HTML和一些Javascript / jQuery。

在這里演示

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');
    }
});​