CODEWITHSUNDEEP
jqueryscrollopacity
Andrew John
Andrew John

Reputation: 163

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>

Upvotes: 4

Views: 22143

Answers (1)

trrrrrrm
trrrrrrm

Reputation: 11812

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

Upvotes: 9

Related Questions