Javascript Girl
  1. Javascript Girl
  3. Événement de défilement de fenêtre jQuery. Pour chaque XX pixel défilé
Intereting Posts
IPhone renvoie le même événement de détresse pour (hash et 3) et (Asterisk et 8) Action en forme de forme angulaire basée sur une variable de portée Da Marco illustrdd illustr illustrF illustr illustrFMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM Fichier fractionné avec JavaScript ou jQuery Express: est-il possible de contourner les sessions pour les fichiers statiques? JSON.stringify output to div in pretty print way Comment puis-je charger un dictionnaire très grand avec JavaScript sans geler le DOM? Cross Domain Resource Sharing GET: 'refusé d'obtenir l'en-tête dangereux' etag '' de Response Comment obtenir l'heure de début et de fin sur le calendrier complet? Accès refusé pour localstorage dans IE10 Comment puis-je obtenir un DIV pour centrer sur une page en utilisant jQuery et blockUI? Détectez si l'onglet du navigateur est actif ou si l'utilisateur s'est éloigné Téléchargez le fichier depuis FTP via Javascript Comment manipuler différentes conventions de dénomination lors de la sérialisation d'objets C # sur JSON? Comment envoyer un fichier à partir de l'URL distante comme réponse GET dans l'application Node.js Express?

Événement de défilement de fenêtre jQuery. Pour chaque XX pixel défilé

J'utilise l'excellent plugin jQuery Reel ( http://jquery.vostrel.cz/reel ) pour un projet. Je voudrais lier à l'événement de défilement de la fenêtre, alors lorsque l'utilisateur défile vers le bas de la page, le plugin avance 1 image pour dire que chaque 10px défile, si l'utilisateur se déplace vers le haut, l'animation est inversée.

Le plugin a des méthodes que je peux transmettre les valeurs sans problème et je sais comment me lier à l'événement de défilement de la fenêtre. Ce dont je suis en difficulté, c'est le dernier.

Comment puis-je utiliser jQuery / JavaScript pour dire pour chaque 10 pixels défilé dans n'importe quelle direction verticale avance 1 image dans l'animation? Je sais que je peux mémoriser la fenêtre dans une variable, mais je ne sais pas comment dire chaque fois qu'elle frappe un multiple de 10 avance d'un cadre.

Merci d'avance.

MODIFIER

Grâce à l'aide des utilisateurs ci-dessous, j'ai élaboré une solution. Comme suit: 

$(window).scroll(function() { windowScrollCount = $(this).scrollTop(); animationFrame = Math.round(windowScrollCount / 100); });

Donc, ici, je reçois la distance défilée dans windowScrollCount, en la traduisant en trames dans animationFrame et en la reculant avec .reel ("frame", animationFrame); Je fais actuellement cela pour chaque 100 images car chaque 10 était rapide.

Grâce à l'aide de codef0rmer et noShowP, j'ai élaboré une solution. Comme suit: 

 $(window).scroll(function() { windowScrollCount = $(this).scrollTop(); animationFrame = Math.round(windowScrollCount / 100); });

Donc, ici, je reçois la distance défilée dans windowScrollCount, en la traduisant en trames dans animationFrame et en la reculant avec .reel ("frame", animationFrame); Je fais actuellement cela pour chaque 100 images car chaque 10 était rapide.

Si je me trompe, vous voudrez peut-être cela: 

 var jump = 500; // consider this is your 10px window.scrollHeight = 0; $(window).scroll(function () { console.log($(this).scrollTop()); var diff = $(this).scrollTop() - window.scrollHeight; if (diff >= jump) { window.scrollHeight = $(this).scrollTop(); console.log('reload frame'); } });

Demo: http://jsfiddle.net/Dyd6h/

Vous pourriez avoir un élément collant en haut de votre page,

Position: fixe; Top 0; Gauche: 0;

(Caché si vous le souhaitez).

Et alors, lorsque vous faites défiler, vous pouvez surveiller son décalage: 

 $('element').offset().top

Vous pouvez ensuite voir à quelle distance de la page vous avez parcouru, donc chaque fois qu'ils défilent, voient quelle est sa valeur maximale et déclenchez les événements de manière appropriée?

MODIFIER:

J'ai configuré un peu JSfiddle avec un début de ce dont je pense que vous avez besoin.

http://jsfiddle.net/qJhRz/3/

Je viens de calculer le cadre sur lequel vous devez être et de le stocker dans une variable. Est-ce quelque chose comme ce que vous cherchez?