1

Tenho um header fixo no topo da página, que chama um índice remissivo, esse índice permite navegar pelo texto usando ancora, a questão é que quando clico em um ítem do índice, navega até o ítem escolhido, mas o header ficar por cima so item, como posso resolver?

para o header:

<style>
  html { padding: 0; }
  body { padding-top: 40px; /* header height */ }
  #header { position: fixed; top: 0; left: 0; width: 100%; height: 40px;}
</style>

inserir a descrição da imagem aqui

1 Resposta 1

1

Adaptei uma resposta do SOen abaixo.

O código está com uma explicação, mas em resumo:

  1. Ao carregar a página, verifique se ela possui um hash #. Exemplo: site.com/#a. Se estiver, então realizamos uma rolagem um pouco acima desse elemento;
  2. Pegamos todos os elementos <a> que possuem o href iniciando com #;
  3. Adicionamos um listener no clique desses elementos;
  4. Quando o usuário clicar num desses elementos <a>, o navegador fará a rolagem para o #id e o listener fará uma segunda rolagem para alguns pixels acima.

// Aqui nós estaremos realizando o scroll da página para 45px acima
// de onde ela está atualmente
function offsetAnchor() {
  if (location.hash.length !== 0) {
    window.scrollTo(window.scrollX, window.scrollY - 45);
  }
}

// Aqui estou adicionando um listener à todos elementos <a> que
// redirecionam para algum link que comece com #. Você pode criar uma 
// classe ou aplicar à elementos específicos.
document.querySelectorAll('a[href^="#"').forEach(el => {
  el.addEventListener("click", function() {
  
    window.setTimeout(function() {
      // O clique é capturado antes da mudança do #, então
      // o timeout faz com que esse código seja executado
      // apenas após a rolagem do redirecionamento ser executada
      offsetAnchor();
    }, 0);

  });
})

// Definimos o offset inicial caso a página aberta já esteja indo para um #elemento
window.setTimeout(offsetAnchor, 0);
header {
  background-color: purple;
  color: white;
  height: 40px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
.anchors {
  margin-top: 45px;
  height: 200px;
}

#a1,
#a2,
#a3 {
  height: 100px;
}

#a1 {
  background-color: #aaa;
}

#a2 {
  background-color: blue;
}

#a3 {
  background-color: red;
  margin-bottom: 300px;
}
<header>
  Header fixo
</header>
<div class="anchors">
  <a href="#a1">Primeiro</a>
  <a href="#a2">Segundo</a>
  <a href="#a3">Terceiro</a>
</div>
<div>
  <p id="a1">Primeiro texto</p>
  <p id="a2">Segundo texto</p>
  <p id="a3">Terceiro texto</p>
</div>

Veja também Por que as vezes é necessário o setTimeout com valor 0 (zero)?

3
  • Mas cade o header fixo que ficava por cima do conteúdo?
    – hugocsl
    Commented 9/05/2020 às 14:49
  • 1
    O Header fixo é apenas a situação da questão, a resposta resolve o problema mesmo sem tê-lo, deixando o exemplo mais limpo. Mas como é mais fácil mostrar do que explicar, editei a resposta com o header fixo. Commented 9/05/2020 às 14:56
  • @RafaelTavares, Perfeito, Obrigado Commented 9/05/2020 às 16:48

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .