スクロールしていった時にその位置に応じて固定要素のCSSを変更することができます。

デモページ

JavaScript

(function($){
	$(function(){	
		$('#fixed').midnight();
	});
});	

HTML

<div id="fixed">
	<div id="fixedInner">FIXED</div>
</div>
<section class="section" id="section01" data-midnight="section01"></section>
<section class="section" id="section02" data-midnight="section02"></section>
<section class="section" id="section03" data-midnight="section03"></section>

CSS

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
#fixedInner {
	font-size: 100px;
	text-align: center;
	padding-top: 180px;
}
#fixed .section01 { color: #ff9130; }
#fixed .section02 { color: #f3d52d; }
#fixed .section03 { color: #ffffff; }
.section {
	width: 100%;
	height: 100%;
}
#section01 { background-color: #ffbc30;}
#section02 { background-color: #ff9130; }
#section03 { background-color: #f3d52d; }

デモページ