15 plugins jQuery pour créer des éléments intelligents

Il est désormais courant de voir certains éléments d’un site fixés à une position lorsque vous faites défiler le site, par exemple. le menu de navigation, l'en-tête ou la barre latérale. Cela permet à l'élément d'être facilement disponible quelle que soit la position de l'utilisateur.

Appelé élément collant, cet objectif peut être atteint simplement en utilisant CSS. Cependant, avec cette méthode, l’effet n’est pas fiable sur plusieurs navigateurs. C’est la raison pour laquelle nous avons rassemblé une poignée de bibliothèques JS et de plugins jQuery qui vous permettront d’atteindre ce design UX particulier en toute simplicité..

1. Waypoints

Waypoints est une bibliothèque permettant d'exécuter une fonction en fonction de la position de l'élément dans la fenêtre. Il est livré avec une fonction de raccourci qui rend cet élément “gluant”. Vous pouvez personnaliser le sens de défilement - en haut, vers le bas, et même droite et la gauche - sur lequel l'élément doit coller dans la fenêtre.

• Dépendance: None / jQuery (facultatif)
• Licence: Licence MIT

2. Kit collant

Avec StickyKit, non seulement vous pouvez coller un élément dans la fenêtre, mais vous pouvez également le faire coller dans l'élément parent que vous désignez pour plusieurs éléments à la fois. Le plugin est également livré avec certains paramètres avancés, notamment les événements personnalisés et les déclencheurs..

• Dépendance: jQuery
• Licence: WTFPL

3. StickyJS

StickyJS est un plug-in jQuery sticky facile à utiliser qui fait ce qu'il dit. Le plugin fonctionne hors de la boîte. Cependant, si vous avez besoin de personnalisation, il est livré avec Options / Paramètres, Méthodes personnalisées et Événements..

• Dépendance: jQuery
• Licence: Licence MIT

4. salle de réception

Un en-tête de site collant occupera un espace vertical précieux qui fait toute la différence lorsque vous visualisez le site sur mobile.. Hauteur libre est une bibliothèque JavaScript qui rendra votre en-tête collant intelligent; l'en-tête sera masqué lorsque les utilisateurs feront défiler la page vers le bas et apparaîtront lors du défilement vers le haut.

• Dépendance: Aucun / jQuery (optionnel) / Angulaire (optionnel)
• Licence: Licence MIT

5. MakefixedJS

Makefixed vous permet de fixer les éléments de manière dynamique lorsque les utilisateurs font défiler la page. Il suffit d'appeler le makeFixed () fonction sur l'élément que vous voulez réparer. Vérifiez la démo pour voir l'action.

• Dépendance: jQuery
• Licence: GPL

6. MidnightJS

Minuit vous permet de coller plusieurs en-têtes / éléments et de basculer entre eux en fonction de leur position dans le document (arborescence DOM), consultez la démo pour voir ce que je veux dire. De plus, vous pouvez changer leur couleur à la volée en ajoutant simplement le données-minuit attribut avec le nom de couleur spécifié.

• Dépendance: jQuery
• Licence: Licence MIT

7. ScrollMagic

ScrollMagic a des fonctionnalités avancées pour ajouter une interaction, lors d'un défilement de page. Vous pouvez épingler des éléments à partir de positions de défilement spécifiques, ajouter une animation basée sur la position de défilement ou même créer un effet de parallaxe impressionnant. La démo vous donne un aperçu de ce que ce plugin peut faire..

• Dépendance: jQuery / Velocity.js
• Licence: Double licence (MIT et GPL)

8. à l'écran

À l'écran est similaire aux points de cheminement - il vous permet d'exécuter des fonctions lorsque l'élément entre, quitte ou atteint certaines positions dans la fenêtre du navigateur..

• Dépendance: jQuery
• Licence: Licence MIT

9. Pin jQuery

jQuery Pin est un petit plugin jQuery pour “épingle” ou “détacher” éléments à une position, lorsque vous faites défiler la page. Ma partie la plus préférée de ce plugin est la possibilité de le désactiver à certaines largeurs de fenêtres.

• Dépendance: jQuery
• Licence: Licence BSD

10. Flotter collant

Flotteur collant nous permet de donner aux éléments une position fixe par rapport à son parent. Vous pouvez définir l'option de blocage en fonction de vos besoins avec les paramètres fournis et en modifiant la valeur. Voir la démo ici.

• Dépendance: jQuery
• Licence: Indéfini

11. Broche Zèbre

Broche Zèbre est un plugin léger permettant de faire n'importe quel élément épingler à leur conteneur. Avec ce plugin, vous pouvez ajouter “collant” aux éléments de votre projet, tels que votre navigation, les barres latérales, les en-têtes et les pieds de page, ou tout autre élément que vous souhaitez garder visible lorsque les utilisateurs font défiler l'écran. Découvrez la démo.

• Dépendance: jQuery
• Licence: Licence GPL

12. HC-collant

Avec HC-collant, vous pouvez créer des éléments collants faisant référence à son conteneur, à un élément donné ou au document lui-même. Ce plugin a quelques options que vous pouvez adapter à vos besoins, comme la distance entre le haut et le bas pour commencer à flotter, et d'autres options..

• Dépendance: jQuery
• Licence: Licence MIT

13. Mojo collant

Mojo collant est un plugin jQuery léger, rapide et flexible permettant de créer des éléments collants impressionnants. Il est compatible avec les navigateurs modernes et se dégradera avec élégance dans IE.

• Dépendance: jQuery
• Licence: Licence MIT

14. Navbar collant

Si vous voulez faire une navigation sur une seule page qui colle quand on fait défiler, cette bibliothèque est pour vous.Navbar collant mettra la navigation en haut de la fenêtre du navigateur et mettra en surbrillance le lien d'ancrage pour vous connecter à la section correspondante de votre page. Vous pouvez également ajouter Animate.css pour embellir l’effet de navigation..

• Dépendance: jQuery
• Licence: Licence MIT

15. StickyStack

StickyStack fera en sorte que les éléments se superposent lorsque les utilisateurs font défiler l'élément et atteignent le haut de la fenêtre. Avec cette bibliothèque, votre longue page se transformera en cartes empilées.

• Dépendance: jQuery
• Licence: Indéfini