title: Creating two different headers-- sticky/scrolling and a top one
body: <p>With my current code, the white bar header is at the top when the page loads up. When you scroll, it fades, and when you scroll to the top, the white header is back. So I've made some progress.
  What I'm trying to get is for there to be a transparent header when the scroll is at the top: (<a href="https://i.imgur.com/5DiVZpp.png" rel="nofollow noreferrer">https://i.imgur.com/5DiVZpp.png</a>) </p>
  
  <p>And for the white bar header, the main one, to be sticky and follow all the way down, like this: (<a href="https://i.imgur.com/lhlGsW6.png" rel="nofollow noreferrer">https://i.imgur.com/lhlGsW6.png</a>)
  and when you scroll back up, for it to fade back to the transparent header.</p>
  
  <p>CSS:</p>
  
  <pre><code>#header{position:fixed;
         left:0;top:0;right:0;height:106px;z-index:100;
      -webkit-transition:background-color 0.2s ease-in-out;
          -moz-transition:background-color 0.2s ease-in-out;
          -ms-transition:background-color 0.2s ease-in-out;
          -o-transition:background-color 0.2s ease-in-out;
          transition:background-color 0.2s ease-in-out
  }
  #header .logo{position:absolute;left:0;top:0;width:162px;height:106px}
  #header .logo a{display:block;position:absolute;left:50%;top:50%;
                  margin:-30px 0 0 -60px;width:120px;height:60px;
                  text-indent:-99999px;
                  background-image:url("header_logo.png")}
  #header.scroll{border-bottom:1px solid #ededed;background:#fff;} /* so this is the transparent header?
  #header.scroll .logo a{background-image:url("header_logo_transp.png")}
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>$(window).scroll(function () {
     var sc = $(window).scrollTop()
     if (sc == 0) {
     $("#header").addClass("scroll");
     //document.removeElementbyId(header); when I put this line in, the header wasn't there when the page first loads up-- kind of what I want, but I want the secondary header to be up there when sc==0
     } 
     else {
     $("#header").removeClass("scroll");
  
      }
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="header" class="scroll" style="top: 0px;"&gt;
          &lt;h1 class="logo"&gt;&lt;a href="#"&gt;WEBSITE&lt;/a&gt;&lt;/h1&gt;
          &lt;a href="#" title="Menu" class="btn_menu"&gt;&lt;/a&gt;
  </code></pre>