How to add the logo to the fixed menu after a certain scroll on the page?

Question

As in this site for example: After fifteen. Just like in the photo, I want the logo to come and from a certain scroll, appear the 'new' menu, along with the photo. I don’t know how to put the photo only in this scroll. Would I have to create two menus? One with the photo and one without?

<div class="conteudo-menu">
    <div class="menu">
        <ul>
            <li><a href="http://seu-link">Início</a></li>
            <li><a href="http://seu-link">Sobre</a></li>
            <li><a href="http://seu-link">Contato</a></li>
            <li><a href="http://seu-link">Anuncie</a></li>
            <li><a href="http://seu-link">Parceria</a></li>
        </ul>
        <div class="clear"></div>
    </div>
</div>



.conteudo-menu { background: #ededed; font-family: Arial, Helvetica, sans-    serif; font-size: 14px; border-bottom: 2px solid #ccc;border-top: 2px solid #ccc;}
.menu-fixo { z-index: 9999; position: fixed; top: 0; width: 880px; height: 37px;}
.menu { height: 60px;}
.menu ul { list-style: none; margin: -9px; }
.menu ul li {float: left; margin-top: 6px; padding: 6px;}
.menu ul li:first-child { padding-left: 228px;}
.menu ul li a { color: #666; text-decoration: blink;}
.menu ul li a:hover { color: #777; text-decoration: underline;}

<script type='text/javascript'>
jQuery("document").ready(function($) {
    var nav = $('.conteudo-menu');
    $(window).scroll(function() {
        if ($(this).scrollTop() > 500) {
            nav.addClass("menu-fixo");
        } else {
            nav.removeClass("menu-fixo");
        }
    });
});
</script>

Answer 1

On the site you left as an example, they may or may not have made 2 menus, usually, no, this does not happen, what happens is a class change, as in your code. In it will be no different, one that will change will be the class:

What I did was create a div and add to it, a img with your logo example:

<div class="logo-menu" >
   <img src="https://i.imgsafe.org/30c0a6d.jpg" alt="logo" style="height: 37px; width: 80px;" >
</div>

And insert your own ul in one another div, because the interaction between lists, Divs and outors elements can, later, generate problems. It was like this:

<div class="lista-menu">
  <ul>
    <li><a href="http://seu-link">Início</a></li>
    <li><a href="http://seu-link">Sobre</a></li>
    <li><a href="http://seu-link">Contato</a></li>
    <li><a href="http://seu-link">Anuncie</a></li>
    <li><a href="http://seu-link">Parceria</a></li>
  </ul>
</div>

In HTML, that’s all...

The main idea

You have an image, a logo, pattern, hidden:

.menu .logo-menu{
   display: none;
}

But the moment she belongs to another class (in case menu-fixo), this can be viewed:

.menu-fixo .menu .logo-menu{
   display: inline-block; /* Algum display que possibilite a visualização */
}

The role of changing the class is only script. But let it be clear that the changes in the classes will be necessary for everything else to fit the image that will appear, is what I will do below.

Tidying...

Already in css, I made some changes being all depending on the class that changes in your script, a class "fixed-menu":

.menu-fixo {
  z-index: 9999;
  position: fixed;
  top: 0;
  width: 880px;
  height: 37px;
}

.menu-fixo .menu {
  height: 37px;
}

.menu-fixo .menu ul {
  height: 37px;
  line-height: 37px; /* Centraliza o texto verticalmente */
  display: inline;
}

.menu-fixo .menu .logo-menu {
  display: inline-block;
  float: left;
}

Already the normal style, without the class "menu-fixed", I have only a few considerations, but it is at your discretion:

.menu ul li {float: left; margin-top: 6px; padding: 6px;}

In the line above, when you put a float: left us li, will not change much, since these are already aligned to the left of pattern.

Suggestion: And you gave one margin-left of 228px. Are you sure this is necessary? If you want to line up right, just use the float: right to div that I created for the li.

Complete Code

See if that’s what you wanted:

jQuery("document").ready(function($) {
  var nav = $('.conteudo-menu');
  $(window).scroll(function() {
    if ($(this).scrollTop() > 500) {
      nav.addClass("menu-fixo");
    } else {
      nav.removeClass("menu-fixo");
    }
  });
});

.conteudo-menu {
  background: #ededed;
  font-family: Arial, Helvetica, sans- serif;
  font-size: 14px;
  border-bottom: 2px solid #ccc;
  border-top: 2px solid #ccc;
}

.menu-fixo {
  z-index: 9999;
  position: fixed;
  top: 0;
  width: 880px;
  height: 37px;
}

.menu-fixo .menu {
  height: 37px;
}

.menu-fixo .menu ul {
  height: 37px;
  line-height: 37px;
  position: relative;
  display: inline;
}

.menu-fixo .menu .logo-menu {
  display: inline-block;
  float: left;
}

.logo-menu {
  display: none;
}

.menu-fixo .menu .lista-menu {
  display: inline-block;
  float: left;
}
.menu { height: 60px;}
.menu ul { list-style: none; line-height: 30px;}
.menu ul li {display: inline-block; margin: 0 6px;}
.menu ul li:first-child { padding-left: 228px;}
.menu ul li a { color: #666; text-decoration: blink;}
.menu ul li a:hover { color: #777; text-decoration: underline;}

#pagina {
  height: 4000px;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="conteudo-menu">
  <div class="menu">
    <div class="logo-menu">
      <img src="https://i.imgsafe.org/30c0a6d.jpg" alt="logo" style="height: 37px; width: 80px;">
    </div>
    <div class="lista-menu">
      <ul>
        <li><a href="http://seu-link">Início</a></li>
        <li><a href="http://seu-link">Sobre</a></li>
        <li><a href="http://seu-link">Contato</a></li>
        <li><a href="http://seu-link">Anuncie</a></li>
        <li><a href="http://seu-link">Parceria</a></li>
      </ul>
    </div>
    <div class="clear"></div>
  </div>
</div>
<div id="pagina"></div>

See that in your script nothing has changed.