Ir para conteúdo
marcelocardoso

NavBar sumir em determinado ID

Recommended Posts

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

seria algo assim para sumir quando clicar no campo1:

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

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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?

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por guma.cojogra@gmail.com
      Alguém poderia me ajudar a criar um mapa mental usando css e html?
      procurei na internet mas não consegui entender e não achei nenhum tutorial ou explicação que pudesse utilizar
      quais as propriedades css que devo utilizar para criar as linhas ligando um nó a outro?
       
       
      vou postar uma imagem de exemplo de como deve ficar.

      obrigado
    • Por dayenne
      Olá desenvolvedor.
      Estou com um problema um tanto quanto bobo, porém não consigo resolver!!! Estou gerando um e-mail automático com html onde nele contém um vídeo, a pagina fica toda certinha, porém quando esse e-mail chega ao remetente,ele chega sem a parte do vídeo, onde tem o iframe e afins.
       
       
       
      Código da parte que NÃO vai para o e-mail.
       
      <div style="margin:0; padding:15px 50px 15px 50px; font-family: Arial, Helvetica, sans-serif; color:#8f8871; font-size:18px; line-height:16px; background-color:#FFF; border-top: 1px dashed #ccc" text-align:"center"> <strong>Não tenha dúvidas! Aperta o play e veja como é fácil montar o seu álbum.</strong><span style="padding-left:10px;"> </span> <br> <br> <iframe width="100%" height="315" src="https://www.youtube.com/embed/_wPfz-w2XDo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture background-color: #fff;" allowfullscreen> </iframe> </div>  
    • Por clickanapolis
      Bom dia, no meu site coloquei ao clicar no link ele vai para uma div dentro da propria pagina, visto que a mesma e uma unica pagina.
       
      O problema é que quando clica no link ele esta parando fora do inicio da div, o que devo fazer?
       
      <script type="text/javascript"> jQuery(document).ready(function ($) { $(".scroll").click(function (event) { event.preventDefault(); $('html,body').animate({ scrollTop: $(this.hash).offset().top }, 1000); }); }); </script> e chamo o link assim:
       
      <li><a href="#acimetech" class="scroll">A Cimetech</a></li>  
    • Por Kelven
      Olá pessoal tudo bem?
       
      Então eu quero colocar um formulário de newsletter em um servidor q não tem suporte para php, o negócio é q depois que a pessoa clica em se cadastrar eu quero que ela seja redirecionada para outro site, então gostaria de saber como posso estar fazendo isso usando apenas javascript, jquery ou ajax com o API do Mailchimp? Porque já procurei muito e não achei, só achei em php.
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.