容器内的固定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');
    }
});​