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

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

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.

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!