Implémenter une barre d'onglets dynamique et collante

Introduction

Dans ce projet, vous allez apprendre à implémenter une barre d'onglets dynamique qui reste fixe en haut de la page lorsque l'utilisateur fait défiler vers le bas. Cette fonctionnalité est couramment présente dans les applications mobiles et les sites web, offrant une expérience utilisateur fluide et intuitive.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment configurer la barre d'onglets dynamique en utilisant le positionnement CSS
• Comment implémenter le comportement de défilement pour maintenir la barre d'onglets dans sa position initiale jusqu'à ce que l'utilisateur défile au-delà de la barre de titre
• Comment tester la fonctionnalité de la barre d'onglets dynamique et vous assurer qu'elle fonctionne comme prévu

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

• Utiliser la propriété CSS position: sticky pour créer une barre d'onglets fixe
• Tester et déboguer la fonctionnalité de la barre d'onglets dynamique pour offrir une expérience utilisateur sans friction

Configurer la structure du projet

Pour commencer, ouvrez l'environnement d'expérience et la structure de répertoires est la suivante :

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

Dans ce qui suit :

• css/style.css est le fichier de style.
• index.html est la page principale.
• js/index.js est le fichier js de la page.
• Le dossier images contient les fichiers d'image utilisés dans le projet.

1. Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.
2. Ouvrez "Web 8080" en haut de la machine virtuelle et rafraîchissez-le manuellement, l'effet devrait être le suivant :

3. Copiez l'adresse commençant par http dans l'image ci-dessus dans votre navigateur et ouvrez une nouvelle fenêtre.

Configurer la barre d'onglets dynamique

Dans cette étape, vous allez apprendre à configurer la barre d'onglets dynamique qui restera fixe en haut de la page lorsque l'utilisateur fera défiler vers le bas.

1. Ouvrez le fichier style.css dans le répertoire css.
2. Localisez la classe .buttons dans le fichier CSS. Cette classe représente la barre d'onglets.
3. Ajoutez le code CSS suivant à l'intérieur de la classe .buttons :

position: sticky;
top: 0;

La propriété position: sticky rend la barre d'onglets collante en haut de la page lorsque l'utilisateur fait défiler vers le bas. La propriété top: 0 assure que la barre d'onglets est fixée en haut de la page.

Tester la barre d'onglets dynamique

1. Enregistrez les modifications apportées au fichier style.css.
2. Raffraîchissez la fenêtre du navigateur qui affiche la page web.
3. Faites défiler la page vers le haut et le bas, et observez le comportement de la barre d'onglets. Elle devrait rester dans sa position initiale jusqu'à ce que l'utilisateur fasse défiler vers le bas au-delà de la barre de titre, auquel moment elle devrait se fixer en haut de la page.

Félicitations! Vous avez réussi à implémenter la fonctionnalité de barre d'onglets dynamique pour le site web du cours.

Résumé

Félicitations! Vous avez terminé ce projet. Vous pouvez pratiquer plus de laboratoires dans LabEx pour améliorer vos compétences.