Animate scrollTop can't get the right $('header').outerHeight() to discount to offset() at first click

Question

I have a header with navigation:

<header>
    <div class="container-fluid">
       <div class="row">
            <div class="col-md-8">
               <div class="siga">
                   <img src="images/logo2.png" alt="">
               </div>
            </div>
            <div class="col-md-4">
               <div class="siga">
                   <h1>Documentação de Componentes</h1>
               </div>
            </div>                
       </div>
        <div class="row">
                <!-- Fixed navbar -->
                <nav class="navbar navbar-default">
                   <div class="logo-min">
                       <img src="images/logo_min.png" alt="">
                   </div>
                    <div class="navbar-header">
                      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                      </button>
                    </div>
                    <div id="navbar" class="navbar-collapse collapse">
                      <ul class="nav navbar-nav">
                         <li><a href="#painelPadrao">Painel Padrão</a></li>
                         <li><a href="#painelAbas">Painel com Abas</a></li>
                         <li><a href="#botoes">Tipos de Botões</a></li>
                         <li><a href="#listagemDados">Listagem de Dados</a></li>
                         <li><a href="#multiSelecao">Multiseleção</a></li>
                         <li><a href="#pesquisa">Painel de pesquisa</a></li>
                      </ul>

                      <div class="scroll-hint">&nbsp;</div>

                    </div><!--/.nav-collapse -->
                </nav>
        </div><!--/.row -->

    </div>
</header>

And I have a jQuery function to stick it to top when srcolling:

$(window).bind('scroll', function() {
                var headerHeight = $('header .container-fluid .row:first-child').outerHeight(); // custom header height
                ($(window).scrollTop() > headerHeight) ? $('header').addClass('goToTop') : $('header').removeClass('goToTop');
            });

I want that when a click occurs on a navigation menu item, the page smooth scrolls to the refered anchor, like the Bootstrap components page, for this I also have this function:

$('.nav a').bind('click', function(){
    var anchor = $(this);
    var navHeight = $('header').outerHeight(); // custom header height

    $('body,html').animate({scrollTop: $(anchor.attr('href')).offset().top - navHeight - 20 ,}, 700);
    event.preventDefault();
});

But, looks like the - navHeight - 20 part of the function is ignored just on the first click. I mean, the scroll makes the anchor covered by the fixed navbar. From the second click on a menu item it works fine;

How can I make it work well even on the first click?