Анимационные эффекты меню при скроллинге.
 

Всем привет решил сделать себе анимированное меню.
Код:

$(function(){
	var shrinkHeader = 300;
		$(window).scroll(function() {
			var scroll = getCurrentScroll();
				if ( scroll >= shrinkHeader ) {
					$('.header-container').addClass('header-container-create-class');
				}
				else {
					$('.header-container').removeClass('header-container-create-class');
				}
		});
	function getCurrentScroll() {
		return window.pageYOffset || document.documentElement.scrollTop;
	}
});

CSS:

.header-container{
	position: relative;
        background: #fff;
	
	top: 0; left: 0;
	width: 100%;
	height: 70px;
}
.header-container-create-class{
	position: fixed;
}

Итог. При начале прокрутке меню расположено вверху страницы. Далее при прокрутке до 300 пикселей меню мгновенно появляется вверху страницы и не изменяет своего положения благодаря position: fixed;

Проблема в том что появление и исчезание меню не поддается анимациям. Появляется и исчезает мгновенно и добавить анимационные эффекты ни через css, ни через метод .animate не получается.