CODEWITHSUNDEEP
jquerycssscroll
Rob
Rob

Reputation: 1495

Fade div in relation to scroll

I'm trying to fade a fixed background div as the page content overlays it.

Ideally would like to do with CSS if possible otherwise jquery

Existing example: http://jsfiddle.net/HsRpT/

HTML

<div class="block">
     <h2>Fade this in / out as scroll down<h2>
</div>

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

Upvotes: 1

Views: 1050

Answers (1)

Lowkase
Lowkase

Reputation: 5699

Hopefully this is what you are looking for:

http://jsfiddle.net/HsRpT/6/

<div class="block">
    <h2>Fade this in / out as scroll down</h2>
</div>
<div class="content">
    <div class="headerbar">
    </div>
</div>

.block {
    background: #339994;
    width:100%;
    padding-top:140px;
    height: 200px;
    position: fixed;
}
h2 {
    color: #fff;
    margin: 0px;
    text-align: center;
}
.headerbar {
    background: #f5dc61;
    width:100%;
    height: 680px;
}
.content {
    position: relative;
    top: 300px;
}
body {
    margin: 0;
    font-family: arial;
}

$(window).scroll(function() {
    var el = $('.block');    
    var offset = el.offset();  
    var opacity = ( (offset.top - el.height() ) / 100 ) * -1;
    $('.block').css('opacity', opacity );
});

Upvotes: 1

Related Questions