Скрыть навигацию при прокрутке вниз

Мне нужно меню навигации, которое скрывается, когда пользователь прокручивает вниз или останавливается (за исключением верхней части, тогда оно должно быть видно), как только пользователь начинает прокручивать вверх, меню должно появиться снова.

Уже:

HTML:

<div id="wrapper">

    <div id="header_nav">
        <ul>
            <li>Punkt1</li>
            <li>Punkt2</li>
            <li>Punkt3</li>
            <li>Punkt4</li>
        </ul>
    </div>

</div>

CSS:

* {
    padding:0px; 
    margin:0px;
}
#wrapper {
    height:1200px; 
    width:960px;
    background-color:#567; 
    margin:auto;
}
#header_nav {
    position:fixed; 
    width:960px;
    height:auto;
    background-color:#678;
}

JQUERY:

$(function(){
    $('#header_nav').data('size','big');
});

$(window).scroll(function(){
    if($('body').scrollTop() > 0)
    {
        if($('#header_nav').data('size') == 'big')
        {
            $('#header_nav').data('size','small');
            $('#header_nav').stop().animate({
                height:'40px'
            },600);
        }
    }
    else
    {
        if($('#header_nav').data('size') == 'small')
        {
            $('#header_nav').data('size','big');
            $('#header_nav').stop().animate({
                height:'100px'
            },600);
        }  
    }
});

Когда я прокручиваю, ничего не происходит, моя навигация остается неизменной все время. Я хочу, чтобы он скрывался, когда я прокручиваю вниз и делаю паузу, но как только я начинаю прокручивать вверх, я хочу, чтобы он исчезал. Но я не могу заставить его работать, не могли бы вы, ребята, сказать мне, что я делаю неправильно?

Также сделал здесь скрипку: http://jsfiddle.net/iBertel/GGRUL/