Fade scroll

by Snj

HTML

<div id="headContainer" class="headerBlock"></div>
<div class="content">
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    <img src="http://media-2.web.britannica.com/eb-media/67/114967-004-E3A58022.jpg" />
    <br>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
</div>

CSS

html,body{margin:0; padding:0}
#headContainer {
    pointer-events: none;
    position:fixed; /* fixing the position takes it out of html flow */
    left:0;			/* top left corner should start at leftmost spot */
    top:0px;			/* top left corner should start at topmost spot */
    width:100%;		/* take up the full browser width */
    height:25px; 	/* define height so you can define for content */
    z-index:100;	/* high z index so other content scrolls underneath */
}
.headerBlock { 
    position: absolute;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(251, 251, 251, 0) 100%);
    background-size: cover;
    top: -40px;
    bottom: 0%;
    width:120%;
    height:120%;
    opacity:0;
}

.content {
    text-align:center;
}

JavaScript

$(document).ready(function() {
    $(window).scroll(function(e) {
        var s = $(window).scrollTop(),
        opacityVal = (s / 200);
        var elementHeight = $('.headerBlock').height();
        var scrollPercent = 100 * $(window).scrollTop() / ($(document).height() - $(window).height());
        console.log(scrollPercent)

        $('.headerBlock').css('opacity', opacityVal);
        //$('.img-src').css('background', 'linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(251, 251, 251, 0) '+ scrollPercent + '%');
    });
});