Анимация JQuery и задержка слайда

Я использую начальную панель навигации, и над навигационными ссылками у меня есть текст, который я хочу скрыть, когда пользователь прокручивает страницу вниз. Кроме того, я хочу, чтобы панель навигации была зафиксирована сверху.

Я использую slideUp() и slideDown(), чтобы скрыть / показать текст над панелью навигации, и использую Jquery animate() для изменения высоты панели навигации. (Мне нужно, чтобы его высота была явной из-за причин CSS, не имеющих отношения к этой проблеме)

Проблема в том, что когда я прокручиваю до верха, animate() ставится в очередь после slideDown() (возможно, он не поставлен в очередь, но имеет некоторую нежелательную задержку), что не происходит в случае прокрутки вниз , Я хочу, чтобы они были одновременными.

Вот JSFiddle с минимальным кодом, воспроизводящим проблему.

Вот соответствующий минимальный код:

Html:

<nav class="navbar navbar-default navbar-fixed-top">
      <div class="header">
          Atención 24 horas 0800-777-8101
    </div>
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span> 
        </button>
        <a class="brand" href="#"><img src="img/logo.jpg" class="logo" /></a>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
         <li class="active"><a href="#">DSDSADSA</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">ADSASD</a></li>
        </ul>
      </div>
    </div>
  </nav>

<div style="height:1000px;background-color:#ccc;padding:50px;"></div>

Css:

.navbar {
  height: 110px;
}
div.header{
  text-align:right;
  height:50px;
}

И самое главное, Javascript:

$(document).ready(function(){
  $(window).scroll(function() {
    if ($(document).scrollTop() > 0) {
      console.log('a');
      $('.navbar').animate({height: '60px'});
      $('div.header').slideUp();
    } else {
      console.log('b');
      $('.navbar').animate({height: '110px'});
      $('div.header').slideDown();
    }
  });
});