javascript conflict

[dmcandell]

I have a piece of jquery that animates elements to make them appear when the user scrolls, this works great. I want to add another piece that shrinks the navigation bar when the user scrolls down.

Running the two scripts on their own work fine, but when running together the nav bar shrinks immediately instead of waiting until I scroll. Scrolling down then back to the top of the page makes the nav bar large again, but can anyone see why it is shrinking immediately?

Here the appearing elements script

if (Modernizr.csstransitions) {
				function preloadImages(imgs, callback) {
					var cache = [],
						imgsTotal = imgs.length,
						imgsLoaded = 0;
			
					$(imgs).each(function (i, img) {
						var cacheImage = document.createElement('img');
						cacheImage.onload = function () {
							if (++imgsLoaded == imgsTotal) callback();
						};
						cacheImage.src = $(img).attr('src');
						cache.push(cacheImage);
					});
				};
				$.fn.trans = function () {
					var t = arguments[0],
						d = arguments[1] || '';
					if (t) {
						$.each(this, function (i, e) {
							$(['-webkit-', '-moz-', '-o-', '-ms-', '']).each(function (i, p) {
								$(e).css(p + 'transition' + d, t);
							});
						});
					}
				};
				
				//document.write('<link rel="stylesheet" href="css/animations.css" />');
			
				$(function(){
					//preload images contained within elements that need to animate
					preloadImages($('footer img, .featured img'), function () {
						$('footer, .featured').appear({
							once: true,
							forEachVisible: function (i, e) {
								$(e).data('delay', i);
							},
							appear: function () {
								var delay = 150,
									stagger = 800,
									sequential_delay = stagger * parseInt($(this).data('delay')) || 0;
			
								$(this).children().each(function (i, e) {
									$(e).trans(i * delay + sequential_delay + 'ms', '-delay');
								});
								$(this).removeClass('animationBegin');
							}
						});
					});
				});
			}

And here is the nav bar shrinking script

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$(window).scroll(function () {
    if ($(document).scrollTop() == 0) {
        $('nav').removeClass('tiny');
    } else {
        $('nav').addClass('tiny');
    }
});
});//]]>  

</script>