<script type="text/javascript">
/* get viewport height and adjust the scroll trigger position by 300px */
var vH=jQuery(window).height()-300;

/* set the overlay status */
var overlay=false;
var onindex=-1;
var positions=[];

/* set the sections with words inside h2 tags or whatever */
var words=['music','information'];

/* set overlay bg colors for the sections */
var colors=['#4E1402','#3f2f4f','#131d0e'];

var wordPositions=function(){
}

/* Add overlay */

jQuery(document).ready(function() {
	if(('.nk-awb-inner').length){
		var positionScroll = jQuery(this).scrollTop()
		jQuery('<dvi class="overlay"></div>').insertAfter(jQuery('.nk-awb-inner'));

		jQuery.each(words, function(no, item) {
			var position = jQuery( 'h2' ).filter( function ()
			{
				return jQuery( this ).text().toLowerCase().indexOf( item.toLowerCase() ) >= 0;
			}).first().offset().top;
			positions.push(position);
			if(positionScroll <= position){
				colorChange(positions,positionScroll,colors,no);
			}
		});
		if(positionScroll>vH){
			overlay=true;
			jQuery('.nk-awb-wrap .overlay').fadeIn();
		}else if(positionScroll<vH){
			overlay=false;
			jQuery('.nk-awb-wrap .overlay').fadeOut();
		}
	}
});

/* Add scroll functions */
jQuery(document).scroll(function() {
	if(('.nk-awb-inner').length){
	/* set window scroll px */
		positionScroll = jQuery(this).scrollTop();
		colorChange(positions,positionScroll,colors,onindex);

	/* add/remove overlay whenever its required */
		if(positionScroll>vH && !overlay){
			overlay=true;
			jQuery('.nk-awb-wrap .overlay').fadeIn();
		}else if(positionScroll<vH && overlay){
			overlay=false;
			jQuery('.nk-awb-wrap .overlay').fadeOut();
		}
	}
});

/* do the color change separated */
function colorChange(positions,positionScroll,colors,onindex){
	jQuery.each(positions, function(index, pos) {
		if(positionScroll>=(pos-400) && index!=onindex ){
			jQuery('.nk-awb-wrap .overlay').css('background', colors[index]);
			onindex=index;
		}
	});
}
</script>
<style>
.nk-awb-wrap .overlay{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(120deg, #000, #000);
    opacity: .7;
}
.nk-awb-wrap .overlay {
    z-index: 1;
	-webkit-transition:background 1s;
	-moz-transition:background 1s;
	-o-transition:background 1s;
	transition:background 1s
}
.nk-awb-wrap > * {
    z-index: 100;
}
</style>