NavBar sumir em determinado ID

[marcelocardoso 6]

olá pessoal!

ajudinha básica... olhem só.
tenho este script abaixo, faz oq eu preciso, porém::

 

<script type="text/javascript">
  $(window).scroll(function() {
    if ($(this).scrollTop() < 100) {
      $('.navbar').css("background-color", "transparent");
      $('.navbar').fadeIn(1000);
    }
    if ($(this).scrollTop() > 101 && $(this).scrollTop() < 1430) {
      $('.navbar').css("background-color", "#F24100");
      $('.navbar').removeClass("transparent")
    }
    else if ($(this).scrollTop() > 1431 && $(this).scrollTop() < 2200) {
      $('.navbar').fadeOut(1000);
    }
    else if ($(this).scrollTop() > 2201) {
      $('.navbar').css("background-color", "#F24100");
      $('.navbar').fadeIn(1000);
    }
    else if ($(this).attr('id').match("menu_orcamento")) {
      $('.navbar').fadeOut(1000);
    }
    else {
      $('.navbar').add("transparent");
      $('.navbar').fadeIn(1000);
    }
  });
</script>

a cada tamanho do SCROLL, ele muda o background da NAVBAR, some ou faz outras coisas, até aí tudo correto.
AGORA: como faço para:

1) tenho divs chamadas (id=campo1), (id=campo2) e etc...
     ao invés de scroll, quando eu CLICAR no menu que tem este ID campo1 e campo2, ele muda ou some a NAVBAR????

como posso montar meu JQUERY script...
Sugestões agradeço.
Obrigado.

[William Bruno 1501]

seria algo assim para sumir quando clicar no campo1:

$('#campo1').on('click', function(){
   $('.navbar').hide();
});

 

[marcelocardoso 6]

Olá bruno.
Tentei rolar o script assim, mas não vai...

$(document).ready(function() {              
if  $('#menu_principal').on("click", function(event){
$('.navbar').removeClass("transparent")
$('.navbar').css("background-color", "yellow");
})
else if $('#menu_conheca').on("click", function(event){
$('.navbar').removeClass("transparent")
$('.navbar').css("background-color", "yellow");
}) else {
$('.navbar').add("transparent");
$('.navbar').fadeIn("1000");
}
});

Oque pode ser?

[marcelocardoso 6]

achei o erro, faltou referenciar o ID...
ops, gafe...

MAS VALEU BRUNO.

[marcelocardoso 6]

aparentemente consegui, mas agora inseri IF ELSE ELSE IF ELSE... mas não tá rolando,
ajudinha na SINTAXE???

 

$(document).ready(function() {   

if ($("#menu1").click(function()) {
$('.navbar').css("background-color", "transparent").fadeIn(1000);
})

else if ($("#menu2").click(function()) {
$('.navbar').css("background-color", "#F24100").removeClass("transparent")
})

else if ($("#menu3").click(function()) {
$('.navbar').fadeOut(1000);
})

else if ($("#menu4").click(function()) {
$('.navbar').css("background-color", "#F24100").fadeIn(1000);
})

else if ($("#menu5").click(function()) {
$('.navbar').css("background-color", "#F24100").fadeIn(1000);
})   

else if ($(this).attr('id').match("menu_orcamento")) {
$('.navbar').fadeOut(1000);
}

else {
$('.navbar').add("transparent").fadeIn(1000);
}
});

desde já agradeço.

[Klawztro 3]

Marcelo, não sei se eu entendi exatamente o que você quis fazer aqui no código. Mas se for pra apenas colocar os eventos em cada elemento (ação no clique do menu3, menu4, menu5, etc...), você não precisaria colocar uma estrutura de if/else, apenas declarar os eventos.

$(document).ready(function() {   
  
  $("#menu1").click(function() {
      $('.navbar').css("background-color", "transparent").fadeIn(1000);
  })

  $("#menu2").click(function() {
      $('.navbar').css("background-color", "#F24100").removeClass("transparent")
  });

  $("#menu3").click(function() {
      $('.navbar').fadeOut(1000);
  });

  $("#menu4").click(function() {
      $('.navbar').css("background-color", "#F24100").fadeIn(1000);
  });

  $("#menu5").click(function()) {
      $('.navbar').css("background-color", "#F24100").fadeIn(1000);
  });   

  //Esse ultimo if/else, mas ai não sei se você está procurando o 
  //id na window ou em outro elemento, então mantive o this.
  if ($(this).attr('id').match("menu_orcamento")) {
      $('.navbar').fadeOut(1000);
  } else {
      $('.navbar').add("transparent").fadeIn(1000);
  }

});

Espero que ajude.