title: how to make logo appear in fixed menu when scrolling down page
body: <p>on my website I have a menu that when you scroll down to 100 px the menu fixes itself to the top of the browser (top:0px; position:fixed;). </p>
  
  <p>However what I need is for a small logo within the menu on the left to not display while the menu is in its original position (top:100px; position:relative) but appear when the user scrolls down the page and the menu fixes to the top of the browser window (top:0px; position:fixed;)</p>
  
  <p>My code is below. I tried to do a JSFiddle but I cant dupicate what is in my html file.</p>
  
  <p>CSS</p>
  
  <pre><code>#menu, #menu ul {
  margin: 0 auto;
  padding: 0;
  background-color: #FFFFFF;
  }
  #menu {
  display: table;
  width: 100%;
  list-style: none;
  position: relative;
  top: 0px;
  text-align: center;
  -webkit-box-shadow: 0px 3px 23px 0px rgba(50, 50, 50, 0.75);
  -moz-box-shadow: 0px 3px 23px 0px rgba(50, 50, 50, 0.75);
  box-shadow: 0px 3px 23px 0px rgba(50, 50, 50, 0.75);
  font-size: 18px;
  height: 30px;
  z-index: 101;
  }
  #menu.fixed {
  position: fixed;
  top: 0;
  width: 100%;
  }
  #menu li {
  display: table-cell;
  list-style: none;
  padding-right: 50px;
  left: 50px;
  vertical-align:middle;
  }
  #menu &gt; li:hover &gt; ul {
  background:#FFF;
  display: block;
  left: 0;
  width: 100%;
  -webkit-box-shadow: 0px 3px 23px 0px rgba(50, 50, 50, 0.75);
  -moz-box-shadow:    0px 3px 23px 0px rgba(50, 50, 50, 0.75);
  box-shadow:         0px 3px 23px 0px rgba(50, 50, 50, 0.75);
  }
  #menu &gt; li &gt; ul {
  display: none;
  position: absolute;
   text-align: center;
  
  }
  #menu li a {
  display: block;
  padding: 10px 10px;
  text-decoration: none;
  font-weight: lighter;
  white-space: nowrap;
  color: #333;
  
  }
  #menu li a:hover {
  color: #CCCCCC;
  font-size: 18px;
  vertical-align: middle;
  }
  #menu li ul li {display: inline-block;
   float:none; }
  </code></pre>
  
  <p>HTML (logo.png is what needs to appear when menu is fixed top top of browser)</p>
  
  <pre><code>&lt;ul id="menu" name="menu"&gt;
   &lt;li&gt;&lt;img src="logo.png" width="100" height="31" /&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;div&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;
    &lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Services&lt;/a&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Plumbing&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Heating&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Plastering&lt;/a&gt;
          &lt;/li&gt;
           &lt;li&gt;&lt;a href="#"&gt;Decorating&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Varnish&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Greenery&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Community&lt;/a&gt;
    &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Help US!&lt;/a&gt;
      &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Charity Work&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Impress Us...&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Careers&lt;/a&gt;
          &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;
  
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;&lt;img src="logocrc.png" width="100" height="25" /&gt;&lt;/a&gt;
  &lt;/li&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;&lt;img src="logoruskin.png" width="100" height="28" /&gt;&lt;/a&gt;
  &lt;/li&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Blog&lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p></p>
  
  <p>Javascript (this makes the menu fixed to top when user scrolls down 100px)</p>
  
  <pre><code>&lt;script&gt;
  $(document).scroll(function () {
  var y = $(document).scrollTop(),
      header = $("#menu");
  
  if (y &gt;= 100) {
      header.addClass('fixed');
  } else {
      header.removeClass('fixed');
  }
  });
  &lt;/script&gt;
  </code></pre>