post #4617
Ajustando Automaticamente Offset Scroll (Distância da Rolagem) do Header no Elementor
Publicado em: 05/03/2024 / Atualizado em: 27/05/2024
Se você quer implementar em sua página um scroll suave para uma seção especifica com WordPress e Elementor, é possivel fazer isso nativamente, usando um botão com o atributo href configurado com o ID de mesmo nome da seção, exemplo:
<a href="#contato">Entre em contato</a>
<div id="#contato">
Esta é uma seção de contato
</div>Porem, quando o Elementor rola a página (scroll page), e você tem um cabeçalho fixo, o cabeçalho acaba “comendo” uma parte da sua seção, que acaba prejudicando a visualização e experiência do usuário.
Para resolver isso, segue abaixo um código Javascript, para adicionar em seu site Elementor, que possibilita, calcular automaticamente o container do cabeçalho, e evita que o scroll da página acabe em cima da seção:
window.addEventListener('elementor/frontend/init', function() {
elementorFrontend.hooks.addFilter('frontend/handlers/menu_anchor/scroll_top_distance', function(scrollTop) {
var header = jQuery('header');
if (header.length) {
return scrollTop - header.outerHeight();
} else {
return scrollTop;
}
});
});OBS: Para o código funcionar perfeitamente, você precisa deixar seu container principal configurado com a tag <head>, para isso, faça o seguinte:
Selecionando o container, clicando em “Layout > Opções adicionais”, você pode trocar a “Tag HTML” para header.
Publicações recomendadas:
Link Direto
Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link direto abaixo. Basta copiar.
bruno.art.br/?p=4617
ID de Referência: 4617
Sugira uma publicação
Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.