post

Ajustando Automaticamente Offset Scroll (Distância da Rolagem) do Header no Elementor

Publicado em: 05/03/2024 / Atualizado em: 27/05/2024

Categorias: BlogElementorJavaScript (JS)JSWordpress

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:

image 7

Selecionando o container, clicando em “Layout > Opções adicionais”, você pode trocar a “Tag HTML” para header.

Publicações recomendadas:


Inscreva-se em Nossa News:

Seja notificando sempre que tiver conteúdo novo disponível no meu canal do Youtube ou artigo no meu Blog.

Bruno Devs News


Link Curto para Compartilhamento

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.

bruno.art.br/pb/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.

Clique aqui e entre em contato