header-logo
Confira como usar o Wix para construir seu site e negócio.
Personalize e gerencie seu site com os recursos do Wix.
Gerencie assinaturas, planos e faturas.
Administre seu negócio e conecte-se com os membros.
Compre, conecte ou transfira um domínio para o seu site.
Expanda seu negócio e presença online.
Aumente sua visibilidade com recursos de SEO e marketing.
Acesse recursos avançados e otimize sua produtividade.
Encontre soluções, problemas conhecidos ou contate-nos.
placeholder-preview-image
Domine novas habilidades com nossos cursos e tutoriais.
Confira nossas dicas de web design, marketing e mais.
Aumente o tráfego orgânico vindo dos motores de busca.
Desenvolva um site único com a nossa plataforma full-stack.
Alcance seus objetivos com a ajuda de um especialista.
placeholder-preview-image

Editor do Wix Studio: criar elementos e seções sticky

3 min
Neste artigo
  • Aplicar a posição sticky a um elemento ou seção
  • Remover a posição sticky
  • Tutorial úteis
Faça com que uma seção ou elemento "grude" na página enquanto os visitantes rolam para cima e para baixo. Quando o elemento ou seção atinge a janela de visualização do visitante, ele gruda na parte superior, na parte inferior ou em ambos. Você pode definir o recuo, que é a distância da parte superior ou inferior.
Vá para a Wix Studio Academy (em inglês) para conferir webinars, tutoriais e cursos adicionais do Wix Studio.
Você sabia?
Você pode adicionar um efeito de rolagem no cabeçalho para alterar a aparência enquanto os visitantes percorrem pela página. Por exemplo, faça com que o cabeçalho mude de cor durante a rolagem ou mova-o para fora do caminho para ajudar os visitantes a se concentrar na página.

Aplicar a posição sticky a um elemento ou seção

  1. Selecione a seção ou elemento relevante.
  2. Clique no ícone Abrir inspetor  no canto superior direito do editor.
Uma captura de tela da abertura do painel Inspetor no Editor do Wix Studio.
  1. Role para baixo até Posição.
  2. Selecione Sticky no dropdown Tipo de posição.
  3. Escolha onde a seção/elemento adere: Parte superior, Parte inferior, ou Parte superior e inferior.
  4. (Opcional) Insira um valor de recuo para criar espaço acima ou abaixo.
  5. Clique na caixa de seleção Manter à frente para ativar ou desativar essa opção:
    • Ativada: o elemento/seção fica visualmente na frente, mas não altera sua posição na ordem DOM da página.
    • Desativada: a posição visual da seção ou elemento corresponde à sua posição na ordem DOM da página. Dependendo de como a página está organizada, o elemento/seção pode não estar na frente.
O dropdown de posição no painel inspetor.
Observação:
A ordem DOM é uma parte importante da acessibilidade do site, desempenho e classificações dos resultados de busca. Portanto, recomendamos ativar Manter à frente, para que você possa obter o efeito visual desejado, mantendo a estrutura da página.

Remover a posição sticky

Você pode reverter elementos e seções para a posição padrão quando quiser. Isso significa que eles não "grudam" mais na tela ao chegar à janela de visualização. Eles permanecem em sua posição.

Para remover a posição sticky:

  1. Selecione a seção ou elemento relevante.
  2. Clique no ícone Abrir inspetor  no canto superior direito do editor.
Uma captura de tela da abertura do painel Inspetor no Editor do Wix Studio.
  1. Role para baixo até Posição.
  2. Selecione Padrão no dropdown Tipo de posição.
Captura de tela de um elemento de pilha na tela, ao lado do painel Inspetor. O tipo de posição na pilha é definido como padrão

Tutorial úteis

Existem muitos efeitos interessantes que você pode criar com elementos e seções sticky. Confira esses vídeos da Wix Studio Academy (em inglês) e explore suas opções: