Анимация фиксированного меню

[Temiks]

Здравствуйте.
У меня есть два фиксированных меню.
У первого высота 150рх и видно оно сразу на странице, а когда пользователь прокручивает страницу меню уменьшается до 60рх.
Мне нужно  сделать так, что бы маленькое меню выезжало с верху страницы.

Примерно как на этом видео:

Если есть готовый скрипт, буду благодарен.

 

upd. Задача немного изменилась, нужен эффект fade in , fade out

Edited February 8, 2016 by Temiks

[by chris]

  $(function () {    function animateMnu(numb, cls) {       var wnd = $(window),           $fix = $('.fix'),           numb = numb || 200,           cls = cls || 'fixed';            wnd.scroll(function () {              var ths = $(this).scrollTop();              function state() {                return (ths > numb) ? true : false;              }              function anim() {                $('.'+cls).animate({                  'top' : 0                }, 800)              }              if (state() && !$fix.hasClass(cls)) {                $fix.addClass(cls);                setTimeout(anim, 400);              }              else if (!state() && $fix.hasClass(cls)) {                $fix.removeClass(cls).removeAttr('style').stop();              }          });      }      animateMnu();     });

<div class="header fix"></div>

.fix {  width: 100%;  height: 150px;  background: #ccc;}.fixed {  position: fixed;  background: orange;  width: 100%;  height: 60px;  top: -60px;  left: 0;}

Разбирайтесь)

[Temiks]

Разбирайтесь)

 

Спасибо. Только заказчик уже передумал и хочет эффекты fade in, fade out. Я так понял, для этого нужно клонировать меню?

[Temiks]

У меня получилось вот так сделать: https://jsfiddle.net/u8bbmqtv/5/
Но есть проблема, я дублировал шапку в html, можно ли сделать как то иначе на жс?

[by chris]

Но есть проблема, я дублировал шапку в html, можно ли сделать как то иначе на жс?

Ага, добавлять класс с нужной высотой, как  в моем коде.