Using jQuery to add a fixed position to a div

Question

I am trying to achieve the effect of an div scrolling until it reaches the top and just stays there.

I have achieved this with:

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

What I want to do, Instead of stating that the div theFixed is fixed in the style in the HTML. I was wondering if there was a way of applying this using the code.

Reason being is that if the script isn't enables or fails for whatever reason - I want the theFixed div to scroll along with the mooey div rather than be stuck in the middle of the page.

You can see what I have done here:

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

Any ideas for this?

Answer 1

Use $('#theFixed').css('position','fixed'); to pin it down.

Answer 2

<script>
$(document).ready(function(){
  $("#FixedElement").css("position","fixed");
});
</script>