Как плавно спрятать меню при помощи css и jquery?

Здравствуйте, необходимо, чтобы на первом экране меню было в обычном положении, затем при прокрутке страницы вниз плавно выезжало сверху, а при прокрутке наверх так же плавно пряталось обратно. Использую код:

$(window).scroll(function(){
            if ($(this).scrollTop() > 350) {
                $('.header').addClass('fixed');
            } else {
                $('.header').removeClass('fixed');
            }
        });

.header {
  height: 50px;
  top: -50px;
  transition: top 1s; }

.fixed {
  z-index: 99999;
  position: fixed;
  top: 0;
  width: 100%;
  transition: top 1s; }

Проблема в том, что блок выезжает плавно при прокрутке вниз, но при прокрутке вверх резко прячется. Как можно сделать так, чтобы и при прокрутке вверх блок так же плавно уезжал?