On scroll change opacity of header?

Question

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>

Answer 1

Try this one:

Example: http://jsfiddle.net/SEH5M/

HTML:

<div class="header">
    <div id="background"></div>
    <div id="labels">
        labels here
    </div>
</div>

<div class="content">
</div>

CSS:

.header{
    width:100%;
    height:100px;
    position:fixed;
    top:0px;
    z-index:3;
}

body{
    margin:0px;
}
.header #background, .header #labels
{
    position:absolute;
    top:0px;
    width:100%;
    height:100%;
}

.header #labels{
    background-color:transperent;
}

.header #background{
    background-color:yellow;
    display:none;
}


.content{
    width:100%;
    height:5000px;
    background-color:green;
}

JQuery:

$(window).scroll(function() {
    if ($(this).scrollTop() > 400) {
        $( ".header #background" ).fadeIn();
    } else {
        console.log('there');
        $( ".header #background" ).fadeOut();
    }
});