Scroll to element's offset depending on header height
<p>I've a header that changes its height depending on the window scroll:</p>

<pre><code>$(window).scroll(function() {
    var $header = $('header');
    if ($(this).scrollTop() &gt; 250) {
        if (!$header.hasClass('sticky')) $header.addClass("sticky");
    } else {
        if ($header.hasClass('sticky')) $header.removeClass("sticky");
    }
});
</code></pre>

<p>The <code>sticky</code> class just changes the height of the header and other styles. The issue is that I need to animate the body to the section by clicking on a header item menu:</p>

<pre><code>$('a.smoothScroll').on('click', function(e) {
    e.preventDefault();
    var $target = $($(this).attr('href'));
    var $header = $('header');
    $('html, body').animate({
        scrollTop: $target.offset().top - $header.height() + 'px'
    }, 300);
});
</code></pre>

<p>So, once the page is loaded, if I click on an menu item, <code>$header</code> has a height value, but once the scroll reaches 251 pixels, its value changes and I don't know how to inform the animate function.</p>

<p>I'm stuck at this point, how can I animate the page scrolling to the appropriate value?</p>