Header change when i scroll down

I have done this jquery script:

jQuery(function() {

var bar = $('#header');

var top = bar.css('height');

$(window).scroll(function() {

	if($(this).scrollTop() > 50) {

			bar.stop().animate({'height' : '5%'}, 500);

		} else {

			bar.stop().animate({'height' : height}, 500);

		}

	});

});

I’m trying to change the header height everytime someone scroll down ( 50 pixels).
then i put this in functions.php

//Scrolldown
	wp_enqueue_script( 'scrolldown', get_template_directory_uri() . '/js/scrolldown.js', array('jquery'));

But it doesn’t work, what i’m missing?