Ancient scroll. Crédto: Clark Young

Como eu resolvi: esconder o header ao afastar o scroll do topo da página

Charbel Rami
Sep 7, 2017 · 2 min read

Ideia inicial

Ao me afastar uma determinada distância do topo da página, uma classe deve ser adicionada ao header para escondê-lo. Ao retornar, a classe deve ser removida para que o header seja mostrado novamente.

Lógica inicial

  • registrar um event listener que chame uma função ao mudar a posição do scroll
  • na função chamada pelo event listener, testar se a distância entre o scroll e o topo é maior ou igual à distância desejada
  • se a condição for verdadeira, adicionar a classe que esconde o header
  • se a condição for falsa, remover a classe que esconde o header

Código

HTML

Na estrutura, é suficiente um header com uma id

<header id="header">
Header
</header>

CSS

E, então, nos estilos, adicionei

  • um body com altura maior que a da viewport (100vh) para testar o scroll
  • um header fixed para que fique no topo da viewport e não só no topo da página
  • uma classe, que aqui chamei de scrollHide, para zerar a opacidade do header quando aplicada
body {
/* somente para teste */
min-height: 200vh;
}
#header {
position: fixed;
}
#header.scrollHide {
opacity: 0;
}

JavaScript

Primeiro, peguei o header

const header = document.getElementById('header')

Como vou adicionar e remover classes, é útil atribuir o elemento com a propriedade classList a uma constante para evitar repetição

const headerClassList = header.classList

Em seguida, vou usar o método addEventListener() para chamar uma função quando um evento do tipo scroll ocorrer em window

window.addEventListener('scroll', () => {})

Quando a função for chamada, vou verificar se devo esconder o header, através de uma condição que avalia se a distância vertical do scroll ao topo da página, ou seja, a distância na coordenada y, é maior ou igual a 200px (valor arbitrário)

if (window.scrollY >= 200) {}

Se a condição for verdadeira, vou adicionar a classe scrollHide ao header. Mas antes, preciso verificar se o header já contém essa classe

if (window.scrollY >= 200) {
if (!headerClassList.contains('scrollHide')) {
headerClassList.add('scrollHide')
}
}

Se a condição da distância for falsa, vou remover a classe, mas só se ela já estiver no header

if (window.scrollY >= 200) {
if (!headerClassList.contains('scrollHide')) {
headerClassList.add('scrollHide')
}
} else {
if (headerClassList.contains('scrollHide')) {
headerClassList.remove('scrollHide')
}
}

E aqui está todo o JavaScript

const header = document.getElementById('header')
const headerClassList = header.classList
window.addEventListener('scroll', () => {
if (window.scrollY >= 200) {
if (!headerClassList.contains('scrollHide')) {
headerClassList.add('scrollHide')
}
} else {
if (headerClassList.contains('scrollHide')) {
headerClassList.remove('scrollHide')
}
}
})
Resultado final

Descobri que descrever e explicar o que foi feito leva bem mais tempo do que fazer. Espero que ajude e até a próxima! :)


Curtiu? Ajudou? Dá like (ou aplausos, como chamam agora). Escrevi alguma coisa errada? Comenta aí!

Como Eu Resolvi

Um repositório de textos curtos explicando como algumas coisas foram resolvidas

Charbel Rami

Written by

Como Eu Resolvi

Um repositório de textos curtos explicando como algumas coisas foram resolvidas