Scrolling Navigation

HTML

<div id="nav" class="header">
    nav here
    <ul class="right">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ul>
</div>

CSS

body{height: 1000px; background: #e6e6e6;}

#nav{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 140px;
    background: blue;
    color: white;
    padding: 15px;
}
.right{
    float: right;
    line-height: 140px;
}

ul{
list-style-type:none;
margin:0;
padding:0;
}

li{
    width:60px;
    display:inline;
    padding-right: 25px;
}

JavaScript

var atTop = !$(document).scrollTop();

$(window).scroll(function () {

    if ($(document).scrollTop() === 0 && !atTop) {
        
        $('#nav.header').animate({height:'140px'}, 500);
        $('ul.right').animate({'line-height':'140px'}, 500);
        
        atTop = true;
        
    } else if (atTop) {
        
        $('#nav.header').animate({height:'40px'}, 500);
        $('ul.right').animate({'line-height':'40px'}, 500);
        
        atTop = false;
        
    }
});