Skip to main content
A Sticky Bar é um elemento fixo que continua visível na tela enquanto o usuário rola a página. Ela costuma ser usada para:
  • Promoções
  • Avisos
  • Mensagens de chamada para ação

Como adicionar uma Sticky Bar

  • Abra a barra lateral esquerda
  • Arraste Sticky Bar para a tela

Configurações da Sticky Bar

Depois de selecioná-la, você verá todos os controles no painel da direita.
Stickybar

Position

Define onde a barra fixa aparece na tela:
  • Top → fica fixa no topo da página
  • Bottom → fica fixa na parte inferior da página

Closable

Define se os usuários podem fechar a barra fixa:
  • Yes → adiciona um botão de fechar (X)
  • No → a barra fica visível o tempo todo

Animation

Define como a barra fixa aparece:
  • Slide → desliza até ficar visível
  • Fade → aparece suavemente
  • None → aparece instantaneamente

Trigger

Define quando a barra fixa aparece:
  • Load → aparece assim que a página carrega
  • Scroll (px) → aparece depois de rolar um número específico de pixels
  • Scroll (%) → aparece depois de rolar uma porcentagem da página
  • Delay (s) → aparece depois de um número definido de segundos

Wait

  • Usado com o gatilho Delay
  • Define quantos segundos esperar antes de mostrar a barra fixa

Aviso sobre a pré-visualização responsiva

Você verá um aviso lembrando de visualizar no celular. 👉 As barras fixas ocupam espaço na tela, então sempre confira como elas ficam em dispositivos menores.

Opções de estilo

Assim como os outros elementos, você pode personalizar:
  • Fundo (cor, gradiente etc.)
  • Espaçamento (padding e margin)
  • Bordas e arredondamento
  • Tipografia
  • Visibilidade por dispositivo

Observações importantes

  • As barras fixas continuam no lugar durante a rolagem
  • Elas aparecem de acordo com o gatilho escolhido
  • Podem prejudicar a experiência do usuário se forem usadas em excesso