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

Métriques du dépôt

Stars

57 stars (57 stars)

Métriques de merge PR

Aucune PR mergée en 30 j (Aucune PR mergée en 30 j)

Description

Guide contributeur

Direction de recherche

Cette tâche implique la mise en œuvre de l'API Intersection Observer pour masquer l'en tête lorsqu'il n'est pas dans la fenêtre d'affichage. Commencez par localiser le composant d'en tête (probablement dans src/components/Header.tsx ou similaire). Ajoutez un effet qui crée un IntersectionObserver pour observer l'élément d'en tête. Lorsque le ratio d'intersection est 0, ajoutez une classe CSS pour masquer l'en tête (par exemple display: none). Assurez vous que l'en tête réapparaît lorsqu'il redevient visible. Testez le comportement lors du défilement. Prenez en compte les implications sur les performances et assurez vous qu'il n'y a pas de décalage de mise en page.

Stack technique

typescript

Domaine

frontend

Type d'issue

Performance

DifficultéDifficulté estimée pour un nouveau contributeur, de 1 pour un très petit changement à 5 pour un travail expert.

2

Temps estiméFourchette de temps approximative pour investiguer, implémenter, tester et préparer une pull request.

Une demi journée

Statut d'activitéDisponibilité apparente de l'issue : fraîche, active, ancienne, bloquée ou en attente d'un mainteneur.

Récente

ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.

Claire

Prérequis

JavaScriptIntersection Observer API

Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.

70