Implementar uma Página Web Tipo Portal

Introdução

Neste projeto, você aprenderá como implementar uma funcionalidade semelhante a um portal em uma página web. A funcionalidade de portal permite que os usuários localizem e naveguem rapidamente para o conteúdo desejado em uma página web longa.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como configurar os arquivos e a estrutura do projeto
• Como implementar a funcionalidade do portal usando JavaScript e jQuery
• Como garantir que os botões laterais mudem de cor com base na posição de rolagem do usuário

🏆 Conquistas

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

• Estruturar e configurar um projeto de desenvolvimento web
• Usar JavaScript e jQuery para manipular o DOM (Document Object Model) e lidar com interações do usuário
• Implementar uma funcionalidade semelhante a um portal para aprimorar a experiência do usuário em uma página web longa

Configurar a Estrutura do Projeto

Nesta etapa, você configurará os arquivos e a estrutura do projeto. Siga os passos abaixo para concluir esta etapa:

1. Abra a pasta do projeto. A estrutura de diretórios é a seguinte:

├── index.html
├── css
├── images
└── js
    ├── index.js
    └── jquery-3.6.0.min.js

2. Nesta estrutura:

   • index.html é a página principal.
   • css é a pasta para arquivos de estilo.
   • images é a pasta para recursos de imagem.
   • js/index.js é o arquivo JS que precisa ser completado.
   • js/jquery-3.6.0.min.js é o arquivo da biblioteca jQuery.

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

4. Abra "Web 8080" no topo da VM e atualize-o manualmente para ver a página.

Implementar a Funcionalidade do Portal

Nesta etapa, você completará o código no arquivo js/index.js para implementar a função do portal.

1. Adicione o seguinte código ao arquivo js/index.js:

$(window).scroll(function () {
  // When the page scrolls to the specified range, the corresponding side buttons change color.
  let top = scrollY;
  $("#lift a").removeClass("active-color");
  if (top >= 0 && top < 960) {
    $("#lift a:nth-of-type(1)").addClass("active-color");
  } else if (top >= 960 && top <= 1920) {
    $("#lift a:nth-of-type(2)").addClass("active-color");
  } else {
    $("#lift a:nth-of-type(3)").addClass("active-color");
  }
});

function toFunction(scrollTopVal) {
  // Click the button to scroll to the specified position.
  window.scrollTo(0, scrollTopVal);
}

2. Explicação:
   • A função $(window).scroll() é usada para detectar a posição de rolagem da página.
   • Quando a página rola para o intervalo especificado, o botão lateral correspondente recebe um estilo ativo (.active-color), e os estilos dos outros botões são definidos como padrão (.default-color).
   • A função toFunction() é usada para rolar a página para a posição especificada quando o usuário clica nos botões laterais.

Testar a Funcionalidade do Portal

1. Volte ao navegador e atualize a página.
2. Clique no botão top, middle, or bottom na lateral da página e observe a página rolando para o intervalo correspondente.
3. Verifique se o botão lateral correspondente recebe um estilo ativo (.active-color) quando a página rola para o intervalo especificado.

O resultado final é mostrado abaixo:

Parabéns! Você implementou com sucesso a funcionalidade do portal em seu projeto.

Resumo

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