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) 当一个锚链接被点击时，重新定位导航以与相关点内联。

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

我不介意使用 javascript 和 jquery。

更新

好的，所以 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');
    }
});​