Como criar: barra de navegação deslizando para baixo durante a rolagem

Como deslizar a barra de navegação 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_fundo: #333; /* Cor de fundo preta */
  posição: fixo; /* Fica preso/fixo */
  topo: -50px; /* Ocultar a barra de navegação fora da visão superior em 50px */
  largura: 100%; /* Largura total */
  transição: topo 0.3s; /* Efeito de transição ao deslizar para baixo (para cima) */
}
/* Definir o estilo dos links da barra de navegação */
#navbar a {
  flutuante: esquerda;
  exibição: bloco;
  cor: branco;
  alinhamento_de_texto: centro;
  espaçamento: 15px;
  decoração_de_texto: none;
}
#navbar a:hover {
  cor_fundo: #ddd;
  cor: preto;
}

Terceiro passo - Adicionar JavaScript：

// 当用户从文档顶部向下滚动 20px 时，向下滑动导航栏
// 当用户滚动到页面顶部时，向上滑动导航栏（距顶部视图 50px）
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    document.getElementById("navbar").style.top = "0";
  } else {
    document.getElementById("navbar").style.top = "-50px";
  }
}

Experimente você mesmo