Javascript Girl
  1. Javascript Girl
  3. Utilisation de JQuery Sticky Elements
Intereting Posts
Faites un lien d'ancrage dans certains pixels au-dessus, où il est lié à Événement pour déterminer quand innerHTML a chargé Brillance d'image avec html5 / CSS / JS Extension des types intégrés de JavaScript – est-ce mauvais? Comment Function Scope fonctionne-t-il en JavaScript? Capture d'alerte Javascript dans Webbrowser Control Qu'est-ce que var x = x || {}; Obtenez une valeur CSS de la feuille de style externe avec Javascript / jQuery Désactiver copier coller dans les champs de saisie HTML? Afficher le type de relation entre les noeuds dans cytoscape.js Simple HTML POST sans script de serveur, peut être fait en utilisant JS Quels navigateurs supportent <script async = "async" />? SVG ne fonctionne pas correctement comme vue arrière Marquer le texte dans une chaîne avec une expression régulière mais exclure les liens Héritage Javascript et perdre le contexte de 'ceci'

Utilisation de JQuery Sticky Elements

J'essaie de faire l'élément Sticky classique en sens inverse.

Voir http://imakewebthings.com/jquery-waypoints/sticky-elements/ pour un exemple d'expérience typique collante.

Ce que je veux faire à la place, c'est d'avoir un élément qui, d'abord, dépasse le bas de la fenêtre des utilisateurs, puis s'arrête et met le doigt sur le pied de page lorsqu'il se déplace aussi loin. Existe-t-il un meilleur moyen d'initialiser ce plugin ou d'utiliser un autre pour y parvenir?

Suite à la documentation , il peut être réalisé comme suit: 

$('#footer').waypoint(function(event, direction) { $('#footer-content').toggleClass('sticky', direction === 'up'); }, { offset: function() { return $.waypoints('viewportHeight') - $(this).outerHeight(); } }); ​

Je affecte .sticky à #footer-content initialement (dans le html).

Voir violon .

Vous pouvez modifier le css pour le rincer avec le bas de l'écran en réglant bottom : 0px pour le sélecteur de classe .top

Actuellement, l'article fait partie du pied de page, ce qui ne serait pas une fonctionnalité facile à ajouter afin de l'empêcher de faire défiler à un certain point sur la page.

J'imagine que vous devriez définir une variable de hauteur de défilement maximale dans le javascript et lorsque vous atteignez ce défilement, obtenez le décalage de l'élément, modifiez sa position en absolu et réglez la position sur le décalage que vous avez enregistré. Si elles sont inférieures à la hauteur maximale de défilement, remplacez la position par la position fixe.