css Header fixo sobrepondo conteúdo após clicar em um item do sumário

[Mateus Garcia]

Introdução

Eai pessoal, tudo certo com vocês?

Já se depararam com aquele probleminha chato onde o seu header fixado fica sobrepondo o conteúdo do seus artigos, no momento em que você clica em algum item do sumário?
Se a resposta foi sim, neste artigo mostrarei a vocês uma solução que funcionou muito bem no meu caso, e que era bem mais simples do que eu imaginava. E para quem nunca viu isso, acompanhe mesmo assim, te garanto que vai ser útil um dia!
Esta solução envolve apenas CSS, e utiliza poucas linhas de código, não sendo necessário criar nenhuma classe, ou seja, não será necessário alterar cada âncora do seu site, funcionará para todas sem modificá-las.

Bom, para exemplificar melhor esse problema, dê uma olhada nessa imagem do meu sumário:

Ao clicar neste item grifado, é isso que acontece:

Diminuí a opacidade do header para podermos enxergar através dele, e como vocês podem ver, o título do item clicado está totalmente escondido atrás do header.

Solução

A solução foi criar um pseudo-elemento com ::before, para funcionar como espaçador entre o topo da página e o conteúdo, onde o atributo height recebe o valor da altura do espaçamento, e o atributo margin recebe também este valor, porém negativo, para que o elemento fique posicionado sobre o elemento target.

:target::before {
  content: ""; /* Constrói um elemento "invisível" */
  display: block;
  height: 100px; /* Altura do espaçador */
  margin: -100px 0 0; /* Margin top do espaçador */
}

O elemento :target é o elemento alvo para o qual a âncora aponta, e ao clicar nela, esse pseudo-elemento será criado sobre esse alvo.

Bom, agora vamos ver o resultado disso?

Nesse exemplo é possível ver que foi criado um elemento ::before sobre a tag strong, que é justamente o nosso pseudo-elemento de espaçamento, e a tag strong é o nosso elemento target. Também é possível observar que este pseudo-elemento está maior que o header, porém essa foi apenas uma escolha de design, vocês podem usar o valor que desejarem, mas recomendo que seja igual, ou um pouco maior que a altura do seu header, neste exemplo meu header tem 85px, e o pseudo-elemento tem 100px, para que o conteúdo não ficasse tão “colado”.

Ao final então, com o console desativado, teremos o seguinte resultado:

Muito melhor, não?

Detalhes importantes

Se você ficou pensando “nossa, mas criando tantos elementos assim para cada âncora, não irá prejudicar o desempenho?”.
A resposta é não, pois o pseudo-elemento só é criado após clicar em uma âncora, e caso clique em outras na sequência, o único target que permanecerá com o espaçamento é o alvo da última âncora clicada.

Outra dúvida que pode ter passado pela sua cabeça é “mas se está sendo criado um novo elemento em cima do target, os links que estiverem nessa área não serão mais clicáveis?”.
Os links e qualquer outro conteúdo que estiverem na área do pseudo-elemento continuarão tendo suas interações, pois se trata de um elemento invisível, o que fica claro ao observar o atributo content, onde é passado o valor de uma string vazia.

Considerações finais

Esta solução foi encontrada no tópico Fixed page header overlaps in-page anchors do Stack Overflow, e outras informações sobre pseudo-elementos foram encontradas na documentação do ::before no site MDN Web Docs - Mozilla.

Lembrando que essa solução pode não funcionar em 100% dos casos, como podemos ver nos comentários do tópico original, então caso não tenha funcionado para você, ou caso você conheça outra solução, conta aí para a gente, vamos adorar trocar ideia!

Mas por hoje é só pessoal, obrigado a todos e bom código para vocês, até a próxima!!