iOS style sticky section headers

script.js

$(window).scroll(function(){
	var scrollY = window.scrollY // how far you are scrolled down

	$('section').each(function(){
		var e = $(this), // element
		    height = e.height() // height of element
		    eTop = e.offset().top // element top offset,
		    h1 = e.find('h1') // title element

		// if the screen is scrolled down past the top of the section
		// and if the screen is not scrolled down far enough to get past the section
		if(scrollY > eTop && scrollY < eTop + height - 100){
			// push the h1 down as far as we have scrolled, minus the y location of the section
			h1.css('top', (scrollY - eTop)+'px')

		// if the screen is scrolled down past the bottom of the section
		}else if(scrollY > eTop + height - 100){
			// make sure the h1 is sitting at the lowest possible position, so we don't get a jump if we go back up later
			h1.css('top', (height - 100) + 'px')
		
		// if we aren't scrolled down far enough for this section to be changed yet
		}else{
			// let's just make sure the h1 is up as high as it can go
			h1.css('top', 0)
		}

	})
})