Comment construire une barre latérale collante sur une page avec ScrollMagic.js

Dans ce tutoriel, nous utiliserons ScrollMagic.js, une bibliothèque JavaScript extrêmement populaire, pour créer une barre latérale qui deviendra collante au défilement de page. En trois étapes (HTML, CSS et JavaScript), nous allons décrire l'ensemble du processus..

Voici ce que nous allons créer (regardez la version plein écran pour découvrir toute sa magie et lui donner un peu de ♥):

La barre latérale ne sera épinglée que lorsque la fenêtre du navigateur mesure au moins 768 pixels de large et atteint le bord supérieur de la fenêtre. Au lieu de cela, les écrans plus petits ont eu une disposition empilée.

Qu'est-ce que ScrollMagic.js?

Pour une meilleure description de ScrollMagic, nous allons passer à sa page Github:

"La bibliothèque javascript pour les interactions de défilement magiques."

Créé par Jan Paepke, il peut être efficacement associé à la plate-forme d’animation de Greensock (GSAP) pour créer des animations JavaScript complexes et attrayantes. Pour mieux comprendre les fonctionnalités de ScrollMagic, consultez cette liste d’exemples et consultez ces tutoriels et cours sur Tuts.+.

Débuter avec ScrollMagic.js

Pour commencer à utiliser ScrollMagic, vous devez d’abord l’inclure dans vos projets. Vous pouvez le télécharger en visitant son dépôt GitHub, en utilisant un gestionnaire de paquets (par exemple, npm) ou en chargeant les ressources nécessaires via un CDN (par exemple, cdnjs).. 

Pour notre démo, nous choisirons la dernière option. Dans cet esprit, si vous regardez sous le Réglages onglet de notre stylo de démonstration, vous verrez que j’ai inclus un fichier JavaScript externe:

J'ai également intégré Babel pour compiler le code ES6 en ES5.

1. Le HTML

Notre code HTML se compose de deux sections d'assistance et d'un article. Le message contient deux sous-sections: les détails du message et la barre latérale du message. Dans un scénario réel, le contenu de l'article pourrait correspondre à un article de blog, à une chambre d'hôtel ou à un programme scolaire..

Voici le balisage:

2. Le CSS

Nous ne définirons aucun style spécial pour notre exemple. Fait intéressant, nous utilisons une grille CSS pour mettre en forme le contenu de la publication sur les écrans moyens et plus (≤768px) .

Voici une partie du CSS:

.section display: flex; align-items: centre; justifier-contenu: centre; hauteur: 100vh; arrière-plan: # ee3f3f; Couleur blanche; text-align: center;  .container max-width: 1000px; marge: 0 auto;  Écran multimédia et (largeur minimale: 768 pixels) .post-content display: grid; intervalle de grille: 20px; colonnes de gabarit: 70% 30%; 

• 

  CSS Grid Layout: Guide de démarrage rapide

  La manière dont nous abordons la présentation sur le Web est en train de changer, et CSS Grid Layout est à la pointe de ce changement. Ce guide de démarrage rapide mis à jour ignorera les détails…

3. Le JavaScript

Avec le HTML et le CSS en place, nous sommes prêts à examiner le code JavaScript responsable du déclenchement de ScrollMagic..  

Gardez à l'esprit que la meilleure façon de comprendre le fonctionnement de ce plugin est de lire sa documentation. Une autre source d'information utile est la feuille de triche de ScrollMagic créée par Petr Tichy.. 

Voici notre code JavaScript:

const postDetails = document.querySelector (". post-details"); const postSidebar = document.querySelector (". post-sidebar"); const postSidebarContent = document.querySelector (". post-sidebar> div"); // 1 contrôleur const = new ScrollMagic.Controller (); // 2 const scène = new ScrollMagic.Scene (triggerElement: postSidebar, triggerHook: 0, durée: getDuration). AddTo (contrôleur); // 3 if (window.matchMedia ("(min-width: 768px)"). Correspond) scene.setPin (postSidebar, pushFollowers: false);  // 4 window.addEventListener ("resize", () => if (window.matchMedia ("(min-width: 768px)"). Correspond) scene.setPin (postSidebar, pushFollowers: false);  else scene.removePin (postSidebar, true);); function getDuration () return postDetails.offsetHeight - postSidebarContent.offsetHeight; 

Décrivons brièvement les actions nécessaires:

1. Nous commençons par créer un contrôleur.
2. Ensuite, nous créons une scène avec des options personnalisées et l'ajoutons au contrôleur..
3. Si la largeur de la fenêtre est d'au moins 768 px et que la barre latérale atteint le bord supérieur de la fenêtre, nous la fixons pendant une durée définie dans la scène. Dans notre cas, la durée souhaitée est calculée en soustrayant la hauteur des détails de la publication de la hauteur du contenu de la barre latérale.. 
4. Lorsque la fenêtre est redimensionnée, nous vérifions sa largeur. Si sa largeur est inférieure à 768 pixels, la barre latérale fait toujours partie du flux de documents normal, sinon elle devient collante..

4. Support du navigateur

Le plugin lui-même est très bien supporté par le navigateur. Au-delà de la prise en charge du plugin, notre démonstration utilise CSS Grid. Elle ne fonctionne donc que dans les navigateurs prenant en charge cette méthode de présentation..

Conclusion

Dans ce tutoriel, nous avons réussi à construire une barre latérale qui devient collante lorsque nous faisons défiler la page. Notre mise en œuvre de base n'est pas la chose la plus puissante que vous puissiez construire avec cette bibliothèque étonnante, mais nous espérons qu'elle sera suffisamment utile pour en tirer parti dans un projet à venir..

Enfin, si vous connaissez d'autres approches plus efficaces de ScrollMagic pour construire notre démo, faites-le nous savoir dans les commentaires ci-dessous..