[fa_t]

Доброго времени суток друзья! Я полнейший нулевой новичок в jquery.
Прошу подсказки. Собственно в двух словах: При скролинге выезжает сверху меню и остаётся там в position:fixed. Всё работает, но не могу понять, как сделать так, чтобы уменьшить размеры меню. Я имею в виду, что в .default высота 100px и размеры шрифта и остальных элементов соответствующие. Но при скролинге, хочу высоту 50px, это работает, но как уменьшить в размере все элементы - не могу понять. В этом и состоит вопрос!!!
Вот код:

<script type="text/javascript"> 

$(document).ready(function(){
         
        var $menu = $("#header");
             
        $(window).scroll(function(){
            if ( $(this).scrollTop() > 180 && $menu.hasClass("default") ){
                $menu.fadeOut('fast',function(){
                    $(this).removeClass("default logo social")
                           .addClass("fixed logo-min social-min")
                           .slideDown('normal');
                });
            } else if($(this).scrollTop() <= 100 && $menu.hasClass("fixed")) {
                $menu.fadeOut('fast',function(){
                    $(this).removeClass("fixed logo-min social-min")
                           .addClass("default")
                           .fadeIn('fast');
                });
            }
        });
});
</script>

Html:

<div id="header" class="default">
          <div class="menu-social">
		        <div class="social">
		        <span class="fb"><a href="#" target="_blank" title="Добавляйся в Фейсбук"></a></span>
		        <span class="twitter"><a href="#" target="_blank" title="Добавляйся в Твиттер"></a></span>
		        <span class="g_plus"><a href="#" tabindex="_blank" title="Добавляйся в Гугл+"></a></span>
	        </div>
	        
	        <ul class="menu">
	    	   <li><a class="active" href="#">Главная</li> </a>
			   <li><a href="#">Блог</li> </a>
			   <li><a href="#">О сайте</li> </a>
	        </ul>
	        <a class="logo" href="#"><strong>Make-Together</strong>.ru</br><p>Aenean commodo ligula eget dolor. Aenean massa.</p></a>
          </div>
          </div>

Ну и css:

#header {
	overflow: hidden; 
}

.social {
	background: #319f9b; width: 130px; height: 50px; border-radius: 0 0 5px 5px;  float: right;
}

.social span a {
	float: left; width: 32px; height: 32px; margin: 8px 3px 5px 7px; 
}

.fb a {
	background: url(images/fb2.png);
}

.twitter a {
	background: url(images/twtt.png);
}

.g_plus a {
	background: url(images/g+.png);
}

.social-min {
	background: #fff; height: 0px; width: 0px; margin:0;
}

.menu {
	 clear: right; float: right; margin-top: 15px;
}

.menu li {
	float: left; font-size: 14px;  margin-right: 5px; text-transform: uppercase; width: 100px; text-align: center;
}

.menu li a {
	text-decoration: none; color: #555; text-shadow: 0 1px 0 #f3f3f3; display: block; transition: .5s;
}

.menu li a:hover {
	color:#319f9b; border-bottom: 2px solid #319f9b; 
}

.menu li a:active {
	color: #319f9b; border-bottom: 2px solid #319f9b;
}

.menu .active {
    color:#319f9b; border-bottom: 2px solid #319f9b; 	
}

.menu-social {
	width: 1351px; margin: 0 auto; padding: 0 50px;
}

.default {
	width: 1351px; height: 100px; margin: 0 auto; background: #fff; border-bottom: 1px solid #d9d9d9; 
}


.fixed {
	position:fixed; top:0px; left: 0px; z-index: 999; width: 100%; background: #fff; border-bottom: 1px solid #d9d9d9; height: 100px;
}

.logo {
	float: left; font-size: 32px; line-height: 1.2; color:#000; margin-top: -30px; display: block;
}

.logo strong {
	font-weight: bold; font-size: 38px; color: #515252;
}
.logo p {
	font-size: 14px;  text-shadow: 0 1px 0 #f3f3f3; text-shadow:none; color: #555;
}

a.logo:hover {

	text-decoration: none; color: #aaa;
}

.logo-min {
	 font-size: 26px; display: block;
}

.logo-min strong {
	font-weight: normal; font-size: 32px;
}

.logo-min p {
	font-size: 10px; color: #555;
}

P.S. Скрипт нашёл на просторах интернета, интуитивно понимаю как он работает, но как правильно всё сделать, не пойму. Насколько я понял, removeClass - удаляет класс, а addClass - добавляет. То есть, удалил + добавил = поменять? В css описываю 2 варианта классов, но не работает