On scroll change opacity of header?

jquery, opacity, scroll

Solution

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

Problem

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> ```

Original source