title: Fixed Header Issue - addClass doesn't work on page load
body: <p>I am trying to build a hidden header which has to appear once I scroll web page below 100px. The header contains logo which has to be hidden as well. The issue is that on the page load everything is hidden same as it has to be, however on scroll only the head appears, the logo is still missing. But if I refresh the page when it is below 100px from top the logo appears and works fine even if I go back on top.</p>
  
  <p>Could you please explain what might be a reason behind the issue as I could not find any proper solution. </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;header&gt;
      &lt;a id="logo" href="index.html"&gt;&lt;/a&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>header{
      position: fixed;
      top: -50px;
      left: 80px;
      height: 50px;
      width: 100%;
      background: rgba(255,255,255, 0.9);
      z-index:9999;
      transition: all 0.3s ease-in-out;
  }
  header.show{
      top:0;
  }
  
  a#logo{
      display: block;
      position:absolute;
      top: inherit;
      left: -80px;
      width: 80px;
      height: 50px;
      background: url('images/logos/logo.svg');
  }
  </code></pre>
  
  <p>JQuery</p>
  
  <pre><code>$(document).ready(function(){
      $(window).scroll(function(){
          if($('body').scrollTop() &gt; 100){
              $("header").addClass('show');
          }
          else{
              $("header").removeClass('show')
          }
  
      });
  });
  </code></pre>