Implementar Barra de Abas Fixa Dinâmica

Introdução

Neste projeto, você aprenderá como implementar uma barra de abas dinâmica que se fixa no topo da página quando o usuário rola para baixo. Este recurso é comumente visto em aplicativos móveis e websites, proporcionando uma experiência de usuário suave e intuitiva.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como configurar a barra de abas dinâmica usando posicionamento CSS
• Como implementar o comportamento de rolagem para manter a barra de abas em sua posição original até que o usuário role além da barra de título
• Como testar o recurso da barra de abas dinâmica e garantir que ele funcione conforme o esperado

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Usar a propriedade CSS position: sticky para criar uma barra de abas fixa
• Testar e depurar o recurso da barra de abas dinâmica para fornecer uma experiência de usuário perfeita

Configurar a Estrutura do Projeto

Para começar, abra o ambiente de experimento, e a estrutura de diretórios é a seguinte:

├── css
│   └── style.css
├── images
│   ├── 1.png
│   └── 2.png
├── index.html
└── js
    └── index.js

Dentre eles:

• css/style.css é o arquivo de estilo.
• index.html é a página principal.
• js/index.js é o arquivo js da página.
• A pasta images contém os arquivos de imagem usados no projeto.

1. Clique no botão Go Live no canto inferior direito do WebIDE para executar o projeto.

2. Abra "Web 8080" no topo da VM e atualize-o manualmente; o efeito deve ser o seguinte:

   

3. Copie o endereço começando com http na imagem acima no seu navegador e abra uma nova janela.

Configurar a Barra de Abas Dinâmica

Nesta etapa, você aprenderá como configurar a barra de abas dinâmica que se fixará no topo da página quando o usuário rolar para baixo.

1. Abra o arquivo style.css no diretório css.
2. Localize a classe .buttons no arquivo CSS. Esta classe representa a barra de abas.
3. Adicione o seguinte código CSS dentro da classe .buttons:

position: sticky;
top: 0;

A propriedade position: sticky faz com que a barra de abas grude no topo da página quando o usuário rola para baixo. A propriedade top: 0 garante que a barra de abas seja fixada no topo da página.

Testar a Barra de Abas Dinâmica

1. Salve as alterações no arquivo style.css.
2. Atualize a janela do navegador que está exibindo a página web.
3. Role a página para cima e para baixo e observe o comportamento da barra de abas. Ela deve permanecer em sua posição original até que o usuário role para baixo além da barra de título, momento em que ela deve se fixar no topo da página.

Parabéns! Você implementou com sucesso o recurso de barra de abas dinâmica para o site do curso.

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.