perf: improve header performance by hiding when not in view (Intersection Observer API)

Métricas do repositório

Stars

57 stars (57 stars)

Métricas de merge de PR

Nenhuma PRs mesclada em 30d (Nenhuma PRs mesclada em 30d)

Description

Guia do colaborador

Direção de pesquisa

Esta tarefa envolve a implementação da API Intersection Observer para ocultar o cabeçalho quando ele não estiver na viewport. Comece localizando o componente do cabeçalho (provavelmente em src/components/Header.tsx ou similar). Adicione um efeito que cria um IntersectionObserver para observar o elemento do cabeçalho. Quando a proporção de interseção for 0, adicione uma classe CSS para ocultar o cabeçalho (por exemplo, display: none). Certifique se de que o cabeçalho reapareça quando se tornar visível novamente. Teste o comportamento durante a rolagem. Considere as implicações de desempenho e garanta que não haja deslocamento de layout.

Pilha de tecnologia

typescript

Domain

frontend

Tipo Issue

Performance

DifficultyDificuldade de implementação estimada para um novo contribuidor, de 1 para alterações muito pequenas a 5 para trabalho de nível especializado.

2

Tempo estimadoUm intervalo de tempo aproximado para um colaborador experiente investigar, implementar, testar e preparar um pull request.

Meio dia

Status da atividadeQuão disponível o issue aparece agora: novo, ativo, obsoleto, bloqueado ou aguardando entrada do mantenedor.

Recente

ClarityCom que clareza o issue explica a mudança esperada, os critérios de aceitação e a próxima etapa.

Claro

Prerequisites

JavaScriptIntersection Observer API

Simpatia para novatosUma pontuação de 1 a 100 que estima o quão acessível este issue é para colaboradores iniciantes.

70