Использование jQuery для добавления фиксированной позиции в div

Я пытаюсь добиться эффекта прокрутки div до тех пор, пока он не достигнет вершины и просто останется там.

Я достиг этого:

HTML

<div id="nav">this is nav</div>
    <div id="mooey">
    <div id="theFixed" style="position:fixed; background-color:red">SOMETHING</div>
</div>

CSS

#mooey {
    background: green;
    min-height:250px;
    margin-top:300px;

}

#nav {
    background:#000000;
    position:fixed;
    top:0;
    width:100%;
    height:100px;
}

JavaScript

$(window).scroll(function(){
    $("#theFixed").css("top", Math.max(100, 300 - $(this).scrollTop()));
});

Что я хочу сделать, вместо того, чтобы заявить, что div theFixed зафиксирован в стиле HTML. Мне было интересно, есть ли способ применить это с помощью кода.

Причина заключается в том, что если сценарий не разрешает или не сработает по какой-либо причине - я хочу, чтобы theFixed div прокручивался вместе с mooey div, а не застревал в середине страницы.

Вы можете видеть, что я здесь сделал:

http://jsfiddle.net/susannalarsen/4J5aj/7/

Есть идеи для этого?