On scroll change opacity of header?

On scroll change opacity of header?

Im so new to JQuery and im sure the answer is super basic. But if someone
can point me in the right direction that would be great. I just want the
opacity of my header to change from 0 to 1 as the user scrolls past 400
pixels. HELP? www.HULU.com has a perfect example.
<code>
<script>
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 400) {
$('.header').css("background", "#000");
} else {
$('.header').css("background", "transparent");
}
});
});
</script>
</code>