Fixed header whilst scrolling

Question

I am using a jquery scripts to cause my header to remain fixed to the top whilst scrolling. But at the moment, it's animated and that's quite a distraction. Is there a way I can modify the script so that it doesn't animate?

JQuery;

<script type="text/javascript">
$().ready(function() {

        var $scrollingDiv = $("#header");

        $(window).scroll(function(){            
            $scrollingDiv.stop().animate({"marginTop": ($(window).scrollTop() + 0) + "px"}, "fixed" );          
        });
    });


</script>

Html;

<div id="header">Content</div>

Answer 1

Add to the style of the header position:fixed;.

Answer 2

Take a look at the link below as a simple solution to your problem.

http://www.cssplay.co.uk/layouts/basics2.html

EDIT: Also the solution from the above link should be cross-browser compatible