Ancient scroll. Crédto: Clark Young

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

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í!