fixed header, resize on scroll

imo header should always be fixed if it is going to scroll with the screen, rather than changing to position:fixed; one you start to scroll, as you have to account for the gap it leaves (can cause the content to ‘jump’ up which looks awful).

example. to clear a 100px header, I will add 100px padding to the top of <body>.

var offset = 0;
var duration = 500;
$(window).scroll(function() {
	if ($(this).scrollTop() > offset) {
		$('header').addClass('fixed');
	} else {
		$('header').removeClass('fixed');
	}
});

this adds and removes the .fixed class to header. note you can add an offset.

header { height:100px; transition:all 0.5s ease; }
header.fixed { height:80px; }

transitions between heights when .fixed class is added.