我如何获得具有由Javascript设置的固定位置的DIV，以使其保留在包含的DIV中？

Question

I have made a JSFiddle where I am trying to make a DIV stay fixed vertically in the viewport as the user scrolls, but stay under a header.

However, the fixed DIV, with the green border, pops over to the right edge of the viewport when you scroll down to the point where the Javascript kicks in.

How do I constrain the green DIV so that it stays within the red bordered containing DIV? Ideally its horizontal position would stay fixed relative to the right edge of the container.

CSS:

header {
   width: 100%;
    height: 10em;
    border: purple thin solid;
}
#container {
    border: thin solid red;
    position: relative;
    height: 100%;
    max-width:30em;
    margin: 0 auto 0 auto;
}
#staticRight {
    border: green thin solid;
    display: inline-block;
    float: right;
    right: 0;
    margin: 2em 0 0 0;
    width: 120px;
    height:600px;
    font-size: .82em;
    line-height:2em;
}
article {
    border: blue thin solid;
    max-width: 20em;
}

Javascript:

var elementPosition = $('#staticRight').offset();
$(window).scroll(function () {
    if ($(window).scrollTop() > elementPosition.top) {
        $('#staticRight').css('position', 'fixed').css('top', '0');

    } else {
        $('#staticRight').css('position', 'static');
    }
});

Answer 1

Try this code. Giving right also to your staticRight div

$('#staticRight').css('position', 'fixed').css('top', '0').css('right','20px');

Instead

$('#staticRight').css('position', 'fixed').css('top', '0');

DEMO

Answer 2

When you set an element to fixed, it gets out of the flow and hence setting the parent to relative would'nt matter. The fixed div gets positioned at the desired coordinates relative to the browser window. So if you can calculate the left poition from the browser, just add it to your $(window).scroll when you change it to fixed. Your code should look like this-

<div id="staticRight" style="position: fixed; top: 0px; left: 70%;"></div>