Header Shrink

gistfile1.txt

// Header Shrink

	var header_element = $('body > header');
	var header_height = header_element.outerHeight(); // Get the header height dynamically so it can be set with CSS
	var header_offset = header_element.next().css('paddingTop').slice(0,-2) - header_height; // Find out the offset for the header to take into account any existing padding in the CSS

	scaleHeader(); // Run once on page load so the header shrinks if the page loads already scrolled down

	$(window).scroll(function() { scaleHeader(); });

	function scaleHeader() {
		var scroll_top = $(window).scrollTop();

		if (scroll_top < header_height/2) {
			header_element.css('height',header_height - scroll_top);

			if (scroll_top < 0)
				header_element.next().css('paddingTop',header_offset + (header_height - scroll_top) - 1);
		}
		else if (scroll_top > header_height/2)
			header_element.css('height',header_height/2);

		if (scroll_top > header_height)
			header_element.addClass('small');
		else
			header_element.removeClass('small');
	}