Como Usar position: sticky para Fixar Elementos em Partes Específicas da Página

Neste tutorial, você aprenderá a usar a propriedade CSS position: sticky para fixar elementos em partes específicas da página enquanto o usuário rola o conteúdo. Essa técnica é útil para criar barras de navegação, cabeçalhos, ou chamadas de ação (CTAs) que permanecem visíveis apenas em determinadas seções.

Passo 1: Entenda o position: sticky

• O que é?

  • position: sticky é uma propriedade CSS que faz com que um elemento se comporte como relative até atingir um ponto específico na tela (definido por top, bottom, left, ou right). Após atingir esse ponto, ele se comporta como fixed, permanecendo visível enquanto o contêiner pai estiver na viewport.

• Quando usar?

  • Para fixar elementos como cabeçalhos, barras de navegação, ou CTAs em partes específicas da página.
  • Quando você quer que o elemento fique visível apenas enquanto o contêiner pai estiver na tela.

Passo 2: Estrutura HTML Básica

Crie a estrutura HTML com um contêiner e um elemento que será fixo.

<div class="container">
  <div class="content">
    <p>Conteúdo da seção 1...</p>
    <p>Mais conteúdo...</p>
  </div>
  <div class="sticky-element">
    Este elemento é sticky!
  </div>
</div>

<div class="container">
  <div class="content">
    <p>Conteúdo da seção 2...</p>
    <p>Mais conteúdo...</p>
  </div>
  <div class="sticky-element">
    Este elemento é sticky!
  </div>
</div>

Passo 3: Adicione Estilos CSS

Agora, vamos estilizar o contêiner e o elemento sticky.

/* Estilos globais */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

/* Contêiner */
.container {
  border: 2px solid #ccc;
  margin-bottom: 20px;
  position: relative; /* Importante para o sticky funcionar */
  height: 300px; /* Altura definida para demonstrar o comportamento */
  overflow-y: auto; /* Adiciona rolagem interna */
}

/* Elemento Sticky */
.sticky-element {
  position: sticky;
  bottom: 0; /* Fixa o elemento na parte inferior */
  background-color: #007BFF;
  color: white;
  padding: 10px;
  text-align: center;
}

Passo 4: Explicação dos Estilos

1. Contêiner (.container):

   • Define uma altura fixa e uma rolagem interna (overflow-y: auto;) para simular o comportamento de rolagem.
   • A propriedade position: relative; é importante para que o elemento sticky funcione corretamente.

2. Elemento Sticky (.sticky-element):

   • Usa position: sticky; e bottom: 0; para fixar o elemento na parte inferior do contêiner pai.
   • O elemento só ficará fixo enquanto o contêiner pai estiver visível na viewport.

Passo 5: Teste o Comportamento

• Abra o arquivo HTML no navegador.
• Role o conteúdo dentro do contêiner e observe que o elemento sticky permanece visível na parte inferior.
• Quando o contêiner pai sai da viewport (por exemplo, ao rolar para a próxima seção), o elemento sticky deixa de ser fixo e rola junto com o conteúdo.

Passo 6: Personalização

Você pode personalizar o comportamento do elemento sticky ajustando os valores de top, bottom, left, ou right. Por exemplo:

• Fixar no Topo:

  .sticky-element {
    position: sticky;
    top: 0; /* Fixa o elemento no topo */
  }
  

• Fixar à Direita:

  .sticky-element {
    position: sticky;
    right: 0; /* Fixa o elemento à direita */
  }
  

Passo 7: Casos de Uso Comuns

1. Barras de Ação em Formulários Longos:

   • Manter botões como "Enviar" ou "Salvar" visíveis enquanto o usuário preenche um formulário extenso.

2. Cabeçalhos ou Rodapés em Seções Específicas:

   • Fixar cabeçalhos ou rodapés em seções específicas de uma página longa.

3. Notificações ou Mensagens:

   • Exibir mensagens importantes que precisam permanecer visíveis enquanto o usuário interage com uma seção.

Passo 8: Considerações Finais

1. Suporte a Navegadores:

   • position: sticky; é amplamente suportado em navegadores modernos, mas verifique a compatibilidade em Can I use.

2. Desempenho:

   • Em páginas com muitos elementos sticky, pode haver impactos no desempenho. Teste em diferentes dispositivos e cenários.

3. Fallback para Navegadores Antigos:

   • Para navegadores que não suportam position: sticky;, considere usar JavaScript para simular o comportamento.

Exemplo Completo

Aqui está o código completo para você testar:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exemplo de Position Sticky</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }
    .container {
      border: 2px solid #ccc;
      margin-bottom: 20px;
      position: relative;
      height: 300px;
      overflow-y: auto;
    }
    .sticky-element {
      position: sticky;
      bottom: 0;
      background-color: #007BFF;
      color: white;
      padding: 10px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="content">
      <p>Conteúdo da seção 1...</p>
      <p>Mais conteúdo...</p>
    </div>
    <div class="sticky-element">
      Este elemento é sticky!
    </div>
  </div>

  <div class="container">
    <div class="content">
      <p>Conteúdo da seção 2...</p>
      <p>Mais conteúdo...</p>
    </div>
    <div class="sticky-element">
      Este elemento é sticky!
    </div>
  </div>
</body>
</html>