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 |
|
2 |
|
3 |
|
4 |
|
5 |
href="" class="logo-wrapper uk-flex uk-flex-middle">
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
href="">Home
|
11 |
|
12 |
|
13 |
href="">About
|
14 |
|
15 |
|
16 |
href="">Contact
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 |
|
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çãogrid-column: 1
egrid-row: 1
. - Como já discutimos, o cabeçalho da página inicialmente ficará invisível. Para fazer isso, vamos dar
opacity: 0
evisibility: 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 nadapadding-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 tembackground-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 dobody
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!