<script type="text/javascript">
/* Add overlay */

jQuery(document).ready(function() {
	var positionScroll = jQuery(this).scrollTop()
	jQuery('<dvi class="overlay"></div>').insertAfter(jQuery('.nk-awb-inner'));
	if(positionScroll>vH){
		overlay=true;
		jQuery('.nk-awb-wrap .overlay').fadeIn();
	}else if(positionScroll<vH){
		overlay=false;
		jQuery('.nk-awb-wrap .overlay').fadeOut();
	}


});
/* get viewport height and adjust the scroll trigger position by 300px */
var vH=jQuery(window).height()-300;

/* set the overlay status */
var overlay=false;

jQuery(document).scroll(function() {

/* set window scroll px */
	positionScroll = jQuery(this).scrollTop();

/* 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();
	}
});
</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;
}
.nk-awb-wrap > * {
    z-index: 100;
}
</style>