相對於另一個div固定

Question

我的div的右側是文本，而div的右側是菜單。 兩者都用div包裹起來以將所有內容居中。 當用戶滾動文本時，該如何使div正確跟隨屏幕？ 我的意思是div權限在同一位置保持“固定”，但是用戶可以移動和滾動文本。（這不是經典的固定位置。我不確定是否應該將其稱為固定相對於另一個div？）

HTML：

<div id="wrapper">

<div id="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque convallis adipiscing dolor, eget rutrum lectus malesuada id. Phasellus vulputate, lorem et convallis vulputate, enim nulla scelerisque nunc, vel auctor orci tellus eget diam. Praesent scelerisque, mauris a molestie lobortis, lectus nisi dignissim massa, eget tempor ante sem in nisi. Proin fermentum euismod ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin nec orci arcu. Nullam molestie consequat porttitor. Pellentesque sit amet nisl odio. Ut vel mi a eros commodo vehicula sagittis ut mi. Donec eu ante velit, vel ullamcorper arcu. Etiam eros sapien, lobortis a porttitor quis, congue vel velit. Nam et dui auctor augue interdum interdum.<br /><br />

</div>

<div id="right"></div>

</div><!-- final de contingut -->

CSS：

body {background-color: #f2f2f2;font-size: 13px;margin: 0;padding: 0;}

#wrapper {margin:0 auto;width:700px;height:900px;background-color:#fff;}

#right {
    float:right;
    width:200px;
    height:500px;
    right:0px;
    border:solid thin #f00;
}

#text {
    float:left;
    width:400px;
    padding:40px;
}

我在這里有示例： http : //jsfiddle.net/u7xRX/1/

Answer 1

據我了解可能是您可以為此使用javascript 。 這樣寫：

$(document).scroll(
    function(){
        var scrollOffset = $(window).scrollTop();
        if(scrollOffset >= 100){
            $('#right').css({position: 'fixed',top:'0', left:'650px'});
        }
        else{
            $('#right').css({position: 'absolute',top:'100px', left:'650px'});
        }
    }
);

檢查此http://jsfiddle.net/ZVrMF/1/

Answer 2

經過很多時間，我只能使用CSS找到解決方案。 我認為如果您沒有給出正確的位置，它會從父div（在這種情況下是包裝器）中獲得正確的位置。 另一方面，我添加了一個邊距將其定位在右側

http://jsfiddle.net/u7xRX/3/

body {background-color: #f2f2f2;font-size: 13px;margin: 0;padding: 0;}

#wrapper {position: relative; margin:0 auto;width:700px;height:900px;background-color:#fff;}

#right {
    position: fixed;
    top: 40px;
    /* right:0px; important not give right position */
    width:200px;
    height:200px;
    margin:0 0 0 500px; /* important to position it on the right */
    background-color: red;
}

#text {
    position: absolute;
    left: 0px;
    width:400px;
    padding:40px;
}