Position a Div "Fixed" Vertically and "Absolute" Horizontally within a "Position:Relative" Container Div

Я ищу способ создать div, который будет закреплен на странице вертикально, так что если пользователь прокручивает страницу вниз, div остается в том же месте на странице. Но при этом он должен быть расположен абсолютно горизонтально, так что если экран пользователя меньше моей страницы, прокрутка вправо или влево не заставит div перемещаться вместе с экраном и, в некоторых случаях, оставаться либо наполовину видимым на краю экрана, либо полностью исчезать со страницы.

Этот div должен находиться внутри Div "Position:Relative".

Я уверен, что нет способа назначить различные позиции изменяющимся осям div, но это лучший способ описать эффект, которого я надеюсь достичь.

На данный момент у меня получилось вот это, по сути это просто фиксированный Div внутри относительного Div.

CSS

#container {
position:relative;
width:700px;
height:1000px;
top:50px;
left:50px;
background-color:yellow;
}

#blue-box{
position:fixed;
width:100px;
height:100px;
background-color:blue;
margin-top:20px;
margin-left:400px;
{

HTML

Я также создал jsFiddle, чтобы помочь продемонстрировать проблему.

Это отлично работает по вертикали, но если вы измените размер вашего веб-браузера так, чтобы он был меньше, чем желтая коробка (контейнер), а затем прокрутите его по горизонтали, синяя коробка будет двигаться вместе со страницей. Я надеюсь предотвратить это.

Если нет способа добиться этого с помощью CSS, я буду рад использовать JavaScript, если он работает со всеми современными браузерами, как IE7, так и IE8. (Именно поэтому я добавил тег JavaScript)

Кто-нибудь может мне помочь?