Como ocultar/revelar uma barra de navegação inferior fixa na rolagem (com JavaScript)

Se você já usou o aplicativo móvel do LinkedIn, provavelmente notou a barra de navegação inferior fixa. Por padrão, ele aparece e, à medida que você rola para baixo, desaparece e aparece novamente à medida que você rola para cima.

Layout do aplicativo móvel do LinkedInLayout do aplicativo móvel do LinkedInLayout do aplicativo móvel do LinkedIn
Layout do aplicativo móvel do LinkedIn

Barras de navegação fixas/fixas são o padrão de layout principal em aplicativos móveis.

Layout do aplicativo móvel da UdemyLayout do aplicativo móvel da UdemyLayout do aplicativo móvel da Udemy
Layout do aplicativo móvel da Udemy

Mas nada nos impede de seguir esse padrão de estruturação de barras de navegação em sites na visualização mobile, seja para navegação primária ou secundária.

No passado, construímos algo semelhante à barra de navegação do aplicativo do LinkedIn – um cabeçalho de página que desaparece ao rolar a página para baixo e é revelado ao rolar para cima.

Vamos confiar nos princípios básicos deste tutorial e criar uma barra de navegação inferior semelhante a um aplicativo, cuja visibilidade dependerá da direção de rolagem, assim como o aplicativo LinkedIn.

O que estamos construindo

Uma imagem (demonstração) vale mais que mil palavras, então dê uma olhada no que vamos criar (role para testar o comportamento):

Para uma melhor experiência, certifique-se de examiná-lo em um dispositivo móvel. Em um cenário real, haverá dois menus de navegação diferentes: um para desktop que provavelmente ficará no topo da página e outro para celular como temos aqui.

1. Comece com a marcação da página

A marcação consistirá no nav elemento e o main elemento onde colocaremos o conteúdo da página. Dentro de nav, colocaremos nosso menu que incluirá cinco itens. Cada um deles terá um SVG retirado da popular biblioteca iconmonstr. Para indicar a página ativa, adicionaremos ao item associado o active aula. Por padrão, o primeiro item terá esta classe. Por fim, adicionaremos um título que ficará visível apenas em leitores de tela.

Aqui está a marcação da página:

1
 class="nav-mobile">
2
   class="screen-reader-text">Mobile Menu Navigation Bar
3
  
4
     class="active">
5
       href="">
6
         width="24" height="24" xmlns="https://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd">
7
           d="M22 11.414v12.586h-20v-12.586l-1.293 1.293-.707-.707 12-12 12 12-.707.707-1.293-1.293zm-6 11.586h5v-12.586l-9-9-9 9v12.586h5v-9h8v9zm-1-7.889h-6v7.778h6v-7.778z" />
8
        
9
        Home
10
      
11
    
12
    
  • 13
           href="">
    
    14
             width="24" height="24" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    
    15
               d="m7.234 3.004c-2.652 0-5.234 1.829-5.234 5.177 0 3.725 4.345 7.727 9.303 12.54.194.189.446.283.697.283s.503-.094.697-.283c4.977-4.831 9.303-8.814 9.303-12.54 0-3.353-2.58-5.168-5.229-5.168-1.836 0-3.646.866-4.771 2.554-1.13-1.696-2.935-2.563-4.766-2.563zm0 1.5c1.99.001 3.202 1.353 4.155 2.7.14.198.368.316.611.317.243 0 .471-.117.612-.314.955-1.339 2.19-2.694 4.159-2.694 1.796 0 3.729 1.148 3.729 3.668 0 2.671-2.881 5.673-8.5 11.127-5.454-5.285-8.5-8.389-8.5-11.127 0-1.125.389-2.069 1.124-2.727.673-.604 1.625-.95 2.61-.95z" fill-rule="nonzero" />
    
    16
            
    
    17
            Favorites
    
    18
          
    
    19
        
    
    20
        
    
    21
      
    
    22
    
    
    23
    
    
    24
    25
       class="container">...
    
    26
    
    

    2. Adicione o CSS Sticky Nav

    Vamos agora nos concentrar apenas nos estilos principais – você sempre pode ver todos clicando no botão CSS guia do projeto de demonstração.

    • O nav será um elemento de posição fixa localizado na parte inferior da página.
    • Todos os itens serão itens flexíveis e ocuparão a mesma quantidade de espaço no menu. Para garantir isso, manipularemos o tamanho da fonte dos links dependendo do tamanho da tela.
    • Para distinguir o item ativo, mudaremos sua cor para laranja e daremos a ele uma borda superior com a mesma cor. Além disso, adicionaremos o mesmo estilo aos itens suspensos.
    Nossa barra de navegação inferior adesiva semelhante a um aplicativoNossa barra de navegação inferior adesiva semelhante a um aplicativoNossa barra de navegação inferior adesiva semelhante a um aplicativo
    Nossa barra de navegação inferior adesiva semelhante a um aplicativo

    Aqui estão os estilos relacionados:

    1
    .nav-mobile {
    
    2
      position: fixed;
    
    3
      bottom: 0;
    
    4
      left: 0;
    
    5
      width: 100%;
    
    6
      background: var(--white);
    
    7
      transition: transform 0.3s;
    
    8
      z-index: 1;
    
    9
      box-shadow: 0 -3px 6px 0 rgba(0, 0, 0, 0.05);
    
    10
    }
    
    11
    
    
    12
    .nav-mobile ul {
    
    13
      display: flex;
    
    14
      list-style: none;
    
    15
      padding: 0;
    
    16
      margin: 0;
    
    17
    }
    
    18
    
    
    19
    .nav-mobile li {
    
    20
      flex: 1;
    
    21
    }
    
    22
    
    
    23
    .nav-mobile a {
    
    24
      display: flex;
    
    25
      flex-direction: column;
    
    26
      align-items: center;
    
    27
      gap: 5px;
    
    28
      padding: 10px;
    
    29
      border-top: 2px solid transparent;
    
    30
      font-size: 16px;
    
    31
      text-decoration: none;
    
    32
      transition: all 0.3s;
    
    33
    }
    
    34
    
    
    35
    .nav-mobile a svg {
    
    36
      transition: fill 0.3s;
    
    37
    }
    
    38
    
    
    39
    .nav-mobile li.active a,
    
    40
    .nav-mobile a:hover {
    
    41
      color: var(--orange);
    
    42
      border-color: currentColor;
    
    43
    }
    
    44
    
    
    45
    .nav-mobile li.active svg,
    
    46
    .nav-mobile a:hover svg {
    
    47
      fill: var(--orange);
    
    48
    }
    
    49
    
    
    50
    @media (max-width: 600px) {
    
    51
      .nav-mobile a {
    
    52
        font-size: 14px;
    
    53
        padding: 5px;
    
    54
      }
    
    55
    }
    
    56
    
    
    57
    @media (max-width: 450px) {
    
    58
      .nav-mobile a {
    
    59
        font-size: 12px;
    
    60
      }
    
    61
    }
    

    3. Adicione o JavaScript

    À medida que começarmos a rolar a página, verificaremos a direção da rolagem e implementaremos esta funcionalidade:

    • Se rolarmos para baixo, o body receberá o scroll-down aula. Nesse ponto, a navegação desaparecerá suavemente com uma animação deslizante.
    • Se rolarmos para cima, ele receberá o scroll-up aula. Nesse ponto, a navegação aparecerá suavemente com uma animação deslizante.
    • Se rolarmos até o topo da página, ela perderá seu scroll-up aula.

    Aqui está o código JavaScript necessário que, como discutimos anteriormente, virá de um tutorial anterior:

    1
    const body = document.body;
    
    2
    const scrollUp = "scroll-up";
    
    3
    const scrollDown = "scroll-down";
    
    4
    let lastScroll = 0;
    
    5
    
    
    6
    window.addEventListener("scroll", () => {
    
    7
      const currentScroll = window.pageYOffset;
    
    8
      if (currentScroll <= 0) {
    
    9
        body.classList.remove(scrollUp);
    
    10
        return;
    
    11
      }
    
    12
    
    
    13
      if (currentScroll > lastScroll && !body.classList.contains(scrollDown)) {
    
    14
        // down
    
    
    15
        body.classList.remove(scrollUp);
    
    16
        body.classList.add(scrollDown);
    
    17
      } else if (
    
    18
        currentScroll < lastScroll &&
    
    19
        body.classList.contains(scrollDown)
    
    20
      ) {
    
    21
        // up
    
    
    22
        body.classList.remove(scrollDown);
    
    23
        body.classList.add(scrollUp);
    
    24
      }
    
    25
      lastScroll = currentScroll;
    
    26
    });
    

    E os estilos associados:

    1
    .nav-mobile {
    
    2
      transition: transform 0.3s;
    
    3
    }
    
    4
    
    
    5
    .scroll-down .nav-mobile {
    
    6
      transform: translate3d(0, 100%, 0);
    
    7
    }
    
    8
    
    
    9
    .scroll-up .nav-mobile {
    
    10
      transform: none;
    
    11
    }
    

    Conclusão

    Mais um tutorial de scrolling chegou ao fim, pessoal! Durante este exercício, criamos uma barra de navegação móvel semelhante a um aplicativo e a deslizamos com base na direção de rolagem. Espero que vocês tenham gostado tanto quanto eu e achado inspirador!

    Mais uma vez, aqui está nossa criação:

    Por último, se você precisar de inspiração para efeitos criativos de cabeçalho na rolagem, considere este tutorial.

    Como sempre, muito obrigado pela leitura!

    Deixe um comentário

    O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *