2

Gostaria de Exibir ou Ocultar o menu conforme o Scroll da página, tentei desenvolver da seguinte maneira:

  window.scrollTo(function(){
    if (window.scrollTo() > 212) { // se for maior de 212 pixels some o menu
        document.getElementsByTagName("nav").style.display="none";
      } else {
        document.getElementsByTagName("nav").style.display="block";
      }
  });

Entretanto não funcionou, minha intenção é desenvolver um código limpo e pequeno, estou "quebrando a cabeça" nisso.

OBS: Não quero usar Jquery, preciso de uma página extremamente leve e o único JS da página será esse, por isso estou usando JS "puro"

1 Resposta 1

4

@Ghabriel você pode começar escultando o evento scroll da janela.

window.addEventListener('scroll', function(ev){
});

E dentro do evento você pode verificar pelo valor da variavel scrollY e com base nele esconder ou mostrar sua div.

if (window.scrollY > 200){
    document.getElementsByTagName("nav").style.display="none";
} else {
    document.getElementsByTagName("nav").style.display="block";
}

crei um exemplo no codepen.io que esta neste link http://codepen.io/silviolucenajunior/pen/bErJgm

Você também pode usar o pageYOffset que é um alias para o scrollY.

Agora você tem que se atentar para algumas coisas, entre elas a performance, pois o evento scroll é disparado a cada pixel movido, então ao mover a barra de rolagem por 100px o evento foi disparado 100 vezes. Também precisa saber se você vai escultar o evento de scroll de toda a janela (como eu fiz no exemplo) ou apenas de algum elemento especifico.

2
  • poxa, exatamente o que eu precisava, e realmente não tinha pensado nesse detalhe de performance, em ser executado a cada pixel movido, vou ter que fazer os testes, muito obrigado @DarkCreator Commented 15/01/2016 às 3:24
  • Por nada @Gabriel Masson. Commented 15/01/2016 às 14:50

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .