Como criar: menu de navegação que se reduz ao rolar

Como reduzir o navbar ao rolar

Primeiro passo - Adicionar HTML:

Criar navbar:

<div id="navbar">
  <a href="#default" id="logo">CompanyLogo</a>
  <div id="navbar-right">
    <a class="active" href="#home">Home</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
  </div>
</div>

Segundo passo - Adicionar CSS:

Definir estilo do navbar:

/* Criar navbar adesiva/fixa */
#navbar {
  overflow: hidden;
  background-color: #f1f1f1;
  padding: 90px 10px; /* Greater padding, diminui ao rolar (usando JS) */
  transition: 0.4s; /* Efeito de transição ao diminuir o padding interno */
  position: fixed; /* Navbar adesiva/fixa */
  width: 100%;
  top: 0; /* No topo */
  z-index: 99;
}
/* Definir o estilo dos links do navbar */
#navbar a {
  float: left;
  cor: preto;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 25px;
  border-radius: 4px;
}
/* Definir o estilo do logo */
#navbar #logo {
  tamanho da fonte: 35px;
  peso da fonte: negrito;
  transição: 0.4s;
}
/* Estilo de links ao passar o mouse */
#navbar a:hover {
  cor de fundo: #ddd;
  cor: preto;
}
/* Definir o estilo de links ativos/atuais */
#navbar a.active {
  cor de fundo: dodgerblue;
  cor: branco;
}
/* Exibir alguns links à direita */
#navbar-right {
  flutuante: direita;
}
/* Adicionar responsividade - exibir a barra de navegação verticalmente em vez de horizontalmente em telas com largura menor que 580 pixels */
@media tela e (largura máxima: 580px) {
  #navbar {
    espaçamento: 20px 10px !important; /* Use !important para garantir que o JavaScript não cubra o espaçamento em telas de pequeno tamanho */
  }
  #navbar a {
    flutuante: nenhum;
    exibição: bloco;
    alinhamento de texto: esquerda;
  }
  #navbar-right {
    flutuante: nenhum;
  }
}

Terceiro passo - Adicionar JavaScript:

// Quando o usuário rolar 80 pixels para baixo do topo do documento, ajuste o espaçamento interno da barra de navegação e o tamanho da fonte do logotipo
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
  if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
    document.getElementById("navbar").style.padding = "30px 10px";
    document.getElementById("logo").style.fontSize = "25px";
  } else {
    document.getElementById("navbar").style.padding = "80px 10px";
    document.getElementById("logo").style.fontSize = "35px";
  }
}

Experimente você mesmo