title: jQuery set margin-top for fixed header when loading from middle of page
body: <p>I have an easy scrolling header that decreases in size (due to decreasing logo height) and sets the margin-top on the body to account for the fixed header.</p>
  
  <p>My problem is when I load the page with the scrollTop() past my header height, the margin-top is set too small - as my image is shrunken.</p>
  
  <p>css:</p>
  
  <pre><code>body {
    -webkit-transition: margin-top .2s ease;
    transition: margin-top .2s ease;
  }
  
  .site-header {
    position: fixed;
    z-index: 110;
    top: 0;
    left: 0;
    width: 100%;
    border-bottom: 1px solid #555;
    background: rgba(71,117,25,.9);
  }
  
  .custom-logo-link img {
    max-height: 75px;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
  }
  
  .scrolling .custom-logo-link img {
    max-height: calc(75px * .8);
    -webkit-transform: translateX(25%);
    transform: translateX(25%);
  }
  </code></pre>
  
  <p>jquery:</p>
  
  <pre><code>jQuery(window).on('load', function(){
  
    marginTop();
  
    function marginTop(){
        var header = jQuery('.site-header');
        var headerHeight = header.height();
        var body = jQuery('body');
  
        body.css('margin-top', headerHeight);
    }
  
  })
  jQuery(window).on('scroll', function(){
  
    scrolling();
  
    function scrolling(){
        var header = jQuery('.site-header');
        var headerHeight = header.height();
        var scrollTop = jQuery(window).scrollTop();
        var flag = true;
  
        if (scrollTop &gt; headerHeight &amp;&amp; flag){
  
            header.addClass('scrolling');
            flag = false;
  
        } else {
  
            header.removeClass('scrolling');
            flag = true;
        }
    }
  })
  </code></pre>
  
  <p>dev site: <a href="http://www.dev.mediaworksweb.com/cologeo-wp/" rel="nofollow noreferrer">http://www.dev.mediaworksweb.com/cologeo-wp/</a></p>
  
  <p>Edit:</p>
  
  <p>I realize that it won't work to load my body's margin-top just based on the logo height, if it is scrolled passed my set point. I also don't quite want to set a static height on my header and margin-top on the body/whatever container.</p>
  
  <p>I tried to add a duplicate of my marginTop() function at the else end of my scrolling() function to reset it on reaching the top of the page but it wasn't accurate (probably due to the transitions?).</p>
  
  <p>Thanks,
  Matt</p>