ASOS plane

gistfile1.txt

$(function(){

	var documentHeight,
		windowHeight,
		creativeShipping,
		creativeShippingBottom;

	// Do not use $(document).height();, chrome returns wrong value
	//documentHeight = $(document).height();

	documentHeight = $('.generic-hp').height() + 200 + 320; // ASOS header height ~200px... ASOS footer height ~320px
	windowHeight = $(window).height();
	creativeShipping = $('.generic-hp-shipping');
	creativeShippingBottom = creativeShipping.offset().top + creativeShipping.height();

	// Init: hide plane on load
	creativeShipping.css({'backgroundPosition': -82});	

	// If window is short enough to be able to scroll PAST the bottom of .generic-hp-shipping
	if (documentHeight - creativeShippingBottom > windowHeight) {

		$(window).scroll(function(event) {
			$this = $(this);

			// proportion measured from top of document to bottom of .generic-hp-shipping 
			percentScrolled = $this.scrollTop()/creativeShippingBottom;

			// move plane according to scrollTop position 
			creativeShipping.css({'backgroundPosition': (percentScrolled*creativeShipping.width()) - 82 });

			// once plane has flown passed, remove it from background image
			// if (percentScrolled > 1) {
			// 	creativeShipping.css({'background': 'none'});
			// }
		});
	}

});