Barras Fixas de Compra (Sticky Bottom CTAs): O Impacto no Scroll e Diretrizes Ergonômicas
Por Wagner Hörlle••17 min de leitura
Resposta Direta: Quando e como utilizar uma barra fixa de compra (Sticky Add-to-Cart) no mobile sem prejudicar a navegação?
A barra fixa de compra (Sticky Bottom CTA) é um dos recursos com maior impacto em CRO mobile, mas deve seguir regras ergonômicas estritas: 1) Ela NUNCA deve estar visível no topo da página enquanto o botão de compra principal ainda estiver na tela (isso polui a visualização); 2) Utilize Intersection Observer para ativá-la com animação suave apenas no instante em que o botão original sumir pelo topo durante a rolagem; 3) Oculte a barra fixa imediatamente no desktop através de media queries (`@media (min-width: 768px) { display: none !important; }`), mantendo-a exclusiva para telas pequenas; 4) Mantenha a altura da barra em no máximo 60px para não roubar a visualização de fotos e avaliações; e 5) Se o produto possuir variações de tamanho, o clique na barra fixa deve abrir uma gaveta rápida de seleção em vez de forçar a rolagem de volta ao topo.
Resumo Executivo (TL;DR)
Fazer o usuário rolar 5 telas de volta para o topo para achar o botão de compra é garantia de abandono de carrinho. Descubra a implementação técnica perfeita do Sticky CTA.
1. A Fadiga do Scroll: O Esforço Desnecessário de Voltar ao Topo
Quando um produto tem avaliações detalhadas, fotos de clientes e tabela de medidas, a página de celular fica longa. Chegando ao final, se o cliente decide comprar, ele precisa rolar 6 vezes a tela para cima. Muitos desistem no caminho.
2. As 5 Diretrizes de Ouro para Não Estragar o Layout
Controle a altura (máximo 60px), insira o preço com clareza ao lado do botão, utilize contraste marcante e respeite a área de segurança (Safe Area Insets) de iPhones modernos para a barra não colidir com o traço de navegação da Apple.
4. Código Limpo: Ativação por Evento sem Queda de Performance
Evite usar ouvintes pesados de scroll (`window.onscroll`). Utilize a API nativa `IntersectionObserver` do navegador para disparar a classe `.visible` apenas quando o botão original cruzar o limiar de visão.
Perguntas Frequentes sobre o Tema
A barra fixa deve conter o seletor de quantidade de produtos?
Não. No espaço estreito do rodapé mobile, mantenha apenas a foto em miniatura, o preço parcelado e o botão de ação. A quantidade pode ser ajustada facilmente no carrinho.
WH
Sobre Wagner Hörlle
Consultor de E-commerce, Growth e Otimização de Conversão (CRO). Atua como conselheiro estratégico e Fractional CMO para diretorias executivas, unindo engenharia de dados, auditoria de mídia paga e arquitetura de conversão focada em rentabilidade e margem líquida.