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

Definiremos duas seções:

• A primeira seção será em tela inteira e conterá um título e um cabeçalho de página. Por padrão, apenas o título aparecerá. Dentro do cabeçalho posicionaremos o logotipo e o menu.
• A segunda seção incluirá algum conteúdo fictício. Abaixo desta seção, podemos ter muito mais.

Aqui está a marcação:

1

 class="first">

2

  
Full-Screen Section to Fixed Header

3

   class="page-header">

4

     class="nav">

5

       href="" class="logo-wrapper uk-flex uk-flex-middle">

6

         width="178" height="38" src="forecastr-logo-white.svg" alt="forecastr logo">

7

8

9

10

           href="">Home

11

12

13

           href="">About

14

15

16

           href="">Contact

17

18

19

20

21

22

 class="second">

23

   class="container">...

24

2. Defina os estilos principais (CSS)

Vamos anotar os estilos principais – você pode ver todos eles clicando no botão CSS guia do projeto de demonstração:

• A primeira seção será um elemento de posição fixa e tela inteira. Além disso, ele se comportará como um contêiner de grade com conteúdo centralizado verticalmente. Você pode alterar a altura da primeira seção através do hero-height Variável CSS. Por exemplo, se você deseja que esta seção cubra apenas metade da tela, altere o valor CSS de 100vh para 50vh.

• Como fizemos muitas vezes no passado, usaremos CSS Grid para empilhar o título e o cabeçalho da página. Para fazer isso, daremos a eles grid-area: 1/1. Esta é a abreviação de configuração grid-column: 1 e grid-row: 1.
• Como já discutimos, o cabeçalho da página inicialmente ficará invisível. Para fazer isso, vamos dar opacity: 0 e visibility: hidden. A última regra é necessária para evitar eventos de clique.
• O nav O elemento será um contêiner flexível com conteúdo centralizado verticalmente. Em telas grandes, o logotipo ficará no lado esquerdo e o menu no lado direito. Em telas pequenas (≤600px), iremos empilhá-las.

• A segunda seção deve ficar abaixo da primeira. Para conseguir isso, daremos padding-top: 110vh. Este valor corresponde à altura da primeira seção (100vh) mais 10vh para criar o espaço entre o texto e a borda superior da seção (igual ao preenchimento inferior). Se não dermos nada padding-top valor, a segunda seção ficará atrás da primeira seção na parte superior da página. Lembre-se de que a primeira seção é um elemento de posição fixa e, portanto, é removida do fluxo normal do documento.

Aqui estão os principais estilos:

1

/*CUSTOM VARIABLES HERE*/

2

3

.first {

4

  position: fixed;

5

  top: 0;

6

  left: 0;

7

  width: 100%;

8

  height: var(--hero-height);

9

  background: url(mountain-full.jpg) no-repeat center / cover;

10

  background-blend-mode: multiply;

11

  display: grid;

12

  place-items: center;

13

  z-index: 1;

14

}

15

16

section,

17

.first > * {

18

  transition: all 0.6s;

19

}

20

21

.first > * {

22

  grid-area: 1/1;

23

  padding: 0 20px;

24

  width: 100%;

25

}

26

27

.first .page-header {

28

  opacity: 0;

29

  visibility: hidden;

30

}

31

32

.first .nav {

33

  display: flex;

34

  flex-wrap: wrap;

35

  align-items: center;

36

  justify-content: space-between;

37

}

38

39

.first .nav ul {

40

  display: flex;

41

  list-style: none;

42

}

43

44

.second {

45

  padding: calc(var(--hero-height) + 10vh) 0 10vh 0;

46

}

47

48

@media (max-width: 600px) {

49

  .first .nav {

50

    flex-direction: column;

51

    justify-content: center;

52

  }

53

}

3. Animar na rolagem (JavaScript)

À medida que começamos a rolar a página para baixo, alternaremos o is-sticky classe do body elemento.

Nesse ponto, as seguintes ações ocorrerão:

• Diminuiremos suavemente a altura da primeira seção de 100vh para 90px. Novamente, você pode alterar o valor da altura do cabeçalho fixo por meio do sticky-header-height Variável CSS. Além disso, atribuiremos a ele uma cor de fundo que combinará com sua imagem e resultará em uma imagem roxa (mais escura). Observe no CSS acima que esta seção tem background-blend-mode: multiply.
• Revelaremos suavemente o cabeçalho da página e ocultaremos o título.
• Vamos diminuir suavemente o padding-top valor da segunda seção de 110vh a 90px + 10vh.
• Sincronizaremos as animações de todos os elementos. Observe no CSS acima que a duração da animação será de 0,6s.
• Definiremos o ::before pseudo-elemento do body elemento que anexará uma sombra de caixa ao cabeçalho da página.

Aqui está o código JavaScript necessário:

1

const body = document.body;

2

const toggleClass = "is-sticky";

3

4

window.addEventListener("scroll", () => {

5

  const currentScroll = window.pageYOffset;

6

  if (currentScroll > 0) {

7

    body.classList.add(toggleClass);

8

  } else {

9

    body.classList.remove(toggleClass);

10

  }

11

});

E os estilos associados:

1

/*CUSTOM VARIABLES HERE*/

2

3

.is-sticky::before {

4

  content: "";

5

  position: fixed;

6

  top: 65px;

7

  left: 0;

8

  width: 100%;

9

  height: 15px;

10

  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.7);

11

}

12

13

.is-sticky .first {

14

  height: var(--sticky-header-height);

15

  background-color: var(--purple);

16

}

17

18

.is-sticky .first h1 {

19

  opacity: 0;

20

  visibility: hidden;

21

}

22

23

.is-sticky .first .page-header {

24

  opacity: 1;

25

  visibility: visible;

26

}

27

28

.is-sticky .second {

29

  padding-top: calc(var(--sticky-header-height) + 10vh);

30

}

Conclusão

Mais um tutorial de scrolling chegou ao fim, pessoal! Durante este exercício, abordamos como transformar uma seção de tela inteira em um cabeçalho fixo em uma rolagem de página, alternando apenas uma classe. Esperançosamente, esta implementação foi clara o suficiente e inspirou você a utilizá-la em um próximo projeto! Claro, você pode desenvolver isso e adicionar alguns recursos extras, como adicionar funcionalidade de paralaxe na rolagem, alterando talvez a posição de fundo da primeira seção.

Vejamos novamente nossa criação:

Por último, mas não menos importante, não se esqueça de dar uma olhada na biblioteca Tuts+ para mais tutoriais de efeitos de cabeçalho na rolagem.

Como sempre, muito obrigado pela leitura!