javascript - 容器内的固定 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) 单击 anchor 链接时，重新定位导航以与相关点内联。

所以我正在做的是在单击 anchor 链接时为 navigation 设置 top:0;，这样做的问题是当我滚动到顶部时固定的 div 现在离开它的容器，即 LeftColumn。

我不介意使用 javascript 和 jquery。

更新

好的，Oswaldo Acauan html/css 解决方案让我的第一点打勾。

第二个问题还是个问题。当我点击链接时，导航与右侧的内容不一致。

我现在遇到了WRONG 并且想要CORRECT 愿景。我这辈子都弄不明白。

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

Answer 1

你可以试试Scrollspy通过 TwitterBootstrap， 或者使用 CSS/HTML 和一点点 Javascript/jQuery 来完成。

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