Fixed relative to another div

Question

I have a div with text on the right and a div with a menu on the right. Both wrapped up with a div to center it all. Ho can I make the div right follow the screen when the user makes scroll with the text? I mean that the div right keeps "fixed" in the same place but the user could make move and scroll the text.(This is not a classic fixed position. I'm not sure if I should call this something like a fixed relative to another 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;
}

I have the example here: http://jsfiddle.net/u7xRX/1/

Answer 1

As per i understand may be you can use javascript for this. Write like this:

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

Check this http://jsfiddle.net/ZVrMF/1/

Answer 2

After a lot of time I could find a solution with just css. I think in fixed position if you don't give the right position it gets it from the parent div, in this case the wrapper. On the other side, I add a margin to position it on the right

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;
}