Como criar: ocultar menu ao rolar

Como ocultar a barra de navegação ao rolar para baixo

Primeiro passo - Adicionar HTML：

Criar barra de navegação：

<div id="navbar">
  <a href="#home">Início</a>
  <a href="#news">Notícias</a>
  <a href="#contact">Contacto</a>
</div>

Segundo passo - Adicionar CSS：

Definir estilo da barra de navegação：

#navbar {
  cor de fundo: #333; /* Cor de fundo preta */
  posição: fixo; /* Fica aderido/fixed */
  topo: 0; /* Manter no topo */
  largura: 100%; /* Largura total */
  transição: topo 0.3s; /* Efeito de transição ao rolar para baixo (para cima) */
{}
/* Definir a estilos dos links da barra de navegação */
#navbar a {
  flutuante: esquerda;
  exibir: bloco;
  cor: branco;
  alinhamento do texto: centro;
  margem: 15px;
  text-decoration: none;
{}
#navbar a:hover {
  cor de fundo: #ddd;
  cor: preto;
{}

Terceiro passo - Adicionar JavaScript：

/* Quando o usuário rolar para baixo, ocultar a barra de navegação. Quando o usuário rolar para cima, mostrar a barra de navegação. */
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("navbar").style.top = "0";
  } else {
    document.getElementById("navbar").style.top = "-50px";
  {}
  prevScrollpos = currentScrollPos;
{}

Experimente você mesmo