background color change on scroll

source http://invoisse.com

by panchroma

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset=utf-8><meta name="viewport" content="width=device-width,initial-scale=1" />
	<title>Invoisse</title>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/fish.js"></script>
	<link href="css/fish.css" rel="stylesheet" media="only screen and (min-width:480px)"/>
	<link href="css/mobile.css" rel="stylesheet" media="only screen and (max-width:480px)">
</head>
	
<body id="signUp" class="top">
<div id="fb-root"></div>




    <div class="bg"><h1>source http://invoisse.com</h1></div>
	
	<section class="desk">
	
	</section>
	
		
	<section class="laptop">
		<h2 class="copy">Simple invoicing for freelancers</h2>
		<div class="image">
			<img src="../img/laptop.svg" />
		</div>
		<h3 class="copy">Sign up and we’ll send you an invite when we’re ready</h2>
	</section>
	
	<div class="lightbox">
		<div class="fix"></div>
		<div class="confirm">
			<div class="check"></div>
			<div class="social">
			
				<div class="facebook">
					<div class="fb-like" data-href="https://www.facebook.com/Invoisse" data-send="false" data-layout="button_count"  data-show-faces="true" data-font="lucida grande"></div>
				</div>
				<div class="twitter">
					<a href="https://twitter.com/share" class="twitter-share-button" data-text="I signed up for" data-via="invoisse" counturl="http://invoisse.com">Tweet</a>
					
					
				</div>
			
			</div>
		</div>
	
	</div>

	<div class="field focused">
		<form class="newEmail" method="post" action="http://invoisse.com/beta/submit.php">
			<input class="email" type="text" placeholder="Notify Me!" name="email" autocomplete="off" />
			<button type="submit">Send</button>
		</form>
	</div>
		


</body>
</html>

CSS

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}body {line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;} /* remember to define focus styles! */ :focus {outline: 0;} /* remember to highlight inserts somehow! */ins {text-decoration: none;}del {text-decoration: line-through;} /* tables still need 'cellspacing="0"' in the markup */ table {border-collapse: collapse;border-spacing: 0;}


/*------------------------------------------------------------
	Layout
------------------------------------------------------------*/

html {
	width: 100%;
	height: 100%;
}

body {
	width: 100%;
	height: 100%;
	text-align: left;
	margin: 0 auto;
	font-size: 13px;
	font-family: VistaSans, helvetica;
	background: #f4f4f4;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	background-color: #1D3D56;
}

section {
	width: 100%;
	min-height: 100%;
	position: relative;
	z-index: 2;
}


@font-face {
    font-family: 'Facit';
    src: url('../fonts/Facit-Semibold.otf');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham Round';
    src: url('../fonts/GothamRnd-Bold.otf');
    font-weight: bold;
    font-style: normal;
}


@font-face {
    font-family: 'VistaSans';
    src: url('../fonts/VistaSansOT-Reg.otf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'VistaSans';
    src: url('../fonts/VistaSansOT-Bold.otf');
    font-weight: Bold;
    font-style: normal;
}

@font-face {
    font-family: 'VistaSans';
   ...

JavaScript

$(function(){
	
	var win = $(window);
	var docHeight 	= $(document).height();	

	var navHeight = 100;
	
	
	
	// INITIALIZE
	
	bgHeight();
	
	
	// RESIZE
	win.resize(function(){ 
	
		bgHeight();
	
	});
	
	
	
	
		
	win.scroll(function(){
	
		winTop = win.scrollTop();
		
		
		if (winTop <= 0 && winTop <= navHeight+100) {
			$('body').removeClass('middle bottom');
			$('body').addClass('top');
		}
		
		/*
		else if (winTop >= navHeight+100 && winTop <= navHeight+150) {
			$('body').removeClass();
			$('body').addClass('topMiddle');
		}
		*/
		
		else if (winTop >= navHeight+200 && winTop <= navHeight+250) {
			$('body').removeClass('top bottom');
			$('body').addClass('middle');
		}
		/*
		else if (winTop >= navHeight+300 && winTop <= navHeight+380) {
			$('body').removeClass();
			$('body').addClass('bottomMiddle');
		}
		*/
		
		else if (winTop >= navHeight+380) {
			$('body').removeClass('top middle');
			$('body').addClass('bottom');
		}
		

		
	});
	
	
	
    win.scroll(function () {
    
    	if ($('body').hasClass('bumped') && win.height() + win.scrollTop() >= $(document).height()) {}
    	
    	else if ($('body').hasClass('bumped') && win.height() + win.scrollTop() -20 <= $(document).height()) {
    		$('body').removeClass('bumped');
    	}
    
        else if (win.height() + win.scrollTop() >= $(document).height()) {
        	$('body').addClass('bumped');
        }
        
        
    });
	
	

	

	
	$('input.email').focus();

	
	$('input.email').on('keyup', function(){
	
		var text		= $(this).val();
	
		if (validateEmail(text) === false) {
		
			$(this).parents('.field').removeClass('valid');
		
		}
		
		else {
		
			$(this).parents('.field').addClass('valid');
		
		}	
	});
	
	
	
	/*
	$('input.email').on('focus', function(){
		$(this).parents('.field').addClass('focused');
	});
		
	$('input.email').on('blur', function(){
		$(this).parents('.field').removeClass('focused');
	});
	
	*/


	
	// Submit Email
	$('.newEmail').on('submit', function(e){
	
		var url...