CyCraft/pepicons

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

Open

#67 aperta il 13 mag 2021

Vedi su GitHub
 (0 commenti) (0 reazioni) (0 assegnatari)TypeScript (6 fork)user submission
good first issuehelp wanted

Metriche repository

Star
 (57 star)
Metriche merge PR
 (Nessuna PR mergiata in 30 g)

Descrizione

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

Guida contributor

Direzione di ricerca
Questo compito prevede l'implementazione dell'Intersection Observer API per nascondere l'intestazione quando non è nel viewport. Inizia individuando il componente dell'intestazione (probabilmente in src/components/Header.tsx o simile). Aggiungi un effetto che crea un IntersectionObserver per osservare l'elemento dell'intestazione. Quando il rapporto di intersezione è 0, aggiungi una classe CSS per nascondere l'intestazione (ad esempio display: none). Assicurati che l'intestazione riappaia quando diventa nuovamente visibile. Testa il comportamento durante lo scorrimento. Considera le implicazioni sulle prestazioni e assicurati che non ci siano spostamenti di layout.
Tech stack
typescript
Dominio
frontend
Tipo issue
Performance
DifficoltàQuanto dovrebbe essere impegnativa per un nuovo contributor.
2
Tempo stimatoTempo stimato per completare e verificare uno scope piccolo.
Mezza giornata
Stato attivitàQuanto è probabile che la issue sia ancora attiva e reviewable.
Nuova
ChiarezzaQuanto chiaramente la issue descrive problema, scope e risultato atteso.
Chiara
Prerequisiti
JavaScriptIntersection Observer API
Adatta ai principiantiQuanto la issue è adatta a contributor alla prima esperienza.
70