scroll.js

var header 	= document.getElementById("header");
var title 	= document.getElementById("title");
var content	= document.getElementById("container");

var minPad = 20;

header.style.position 	= "fixed";

function resize()
{
	pad = window.innerHeight*.28 - title.clientHeight/2;

	content.style.marginTop 	= window.innerHeight*2/3 + "px";
	content.style.paddingTop 	= window.innerHeight*2/5 + "px";

	scroll();
}

function scroll()
{
	var scrolled = document.documentElement.scrollTop;
	var top =	 pad 	- scrolled;
	var bottom = pad*2 	- scrolled;

	header.style.paddingTop = ( top < minPad ? minPad : top ) + "px";
	header.style.paddingBottom = ( bottom < minPad ? minPad : ( pad < bottom ? pad : bottom ) ) + "px";
}

onresize = resize;
onscroll = scroll;

resize();