Fixed menu bootstrap

Question

I made a menu with an image and fixed buttons on my site. Using the following code:

<div class="navbar navbar-default  navbar-fixed-top" role="navigation"          style="background-color:#3299CC">
<div>
<img src="img/logo.png" alt="Smiley face" >

</div>


  <div class="container">
<div id="navbar" class="navbar-collapse collapse">
  <ul class="nav navbar-nav">
    <li><a href="index.html">Home</a></li>
    <li><a href="atividades.html">Atividades</a></li>
    <li><a href="cronograma.html">Cronograma</a></li>
<li><a href="inscricao.html">Inscrição</a></li>
<li><a href="Contato.html">Contato</a></li>

  </ul>
  <ul class="nav navbar-nav navbar-right">
    <li><a href="http://www.pet.br/">PET </a></li>
  </ul>
</div>

But so it is the image and the buttons fixed at the top of the screen, I would like when I scroll down, only the buttons were fixed at the top of the screen and the image "disappeared".

Answer 1

You were right to put your logo on a different div than the menu div. What you should do is give this div a class (for example <div class="menu-com-logo">) once the scroll has reached a certain mark. And this class must have the attribute in the CSS display: none; To accomplish this use jQuery. An example would be this:

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