jQuery Girl
  1. jQuery Girl
  3. Pop up texte après le défilement de certaines distances ne fonctionne pas
Intereting Posts
Comment lire la valeur td de la ligne de table HTML générée dynamicment? Basculement du contrôle entre plusieurs popups enfants API REST GET / POST utilisant jquery AJAX pour obtenir un noeud à l’aide de la firebase database de graphes neo4j Changer la fonction du bouton avec jQuery? Même date et heure dans les fuseaux horaires du navigateur – sur un moteur de réservation Je veux toujours aller à la première page en revenant dans l’histoire jquery-file-upload plugin: Comment changer le chemin de téléchargement? les listes déroulantes de superfish doivent être mises en colonne quand il y a beaucoup d’enfants et pas de nœuds de «petits-enfants» jquery trouve .html () égal à val (); Passer des données de page à bootstrap modal en utilisant SQL & PHP Comment faire pour que la valeur soit entrée dans le champ de recherche Dans Datatables Comment afficher le chargement de spinner dans une zone de texte en cliquant sur un bouton? Comment organiser le style de code jQuery afin d’éviter toute confusion entre tant de crochets et autant de nids? Un bon échantillon? jQuery redimensionner des deux côtés Javascript – Infinite scroll JSON array?

Pop up texte après le défilement de certaines distances ne fonctionne pas

J’essaie de faire apparaître du texte à un emplacement fixe à différents intervalles de défilement y, mais il me semble impossible d’enchaîner correctement les scripts. Il semble ignorer la première action d’affichage du premier message.

Code: http://jsfiddle.net/k8bnd/ 

var startY = 1500; var stopY = 2000; $(window).scroll(function(){ checkY(); }); function checkY() { console.log($(window).scrollTop()); if($(window).scrollTop() > startY && $(window).scrollTop() <= stopY) { console.log("Show"); $('.titleTwo').show(); } else { console.log("Hide"); $('.titleTwo').hide(); } } checkY();

Cela se produit parce que vous avez écrasé les valeurs / fonctions précédentes. Pour rendre cela plus dynamic, vous pouvez append des atsortingbuts data- * à chaque élément de message en spécifiant les positions pour lesquelles ils sont valides. Ensuite, dans l’événement de défilement, vérifiez les données de position de chaque élément. Si la fenêtre se trouve dans cette plage, affichez-la, sinon masquez-la.

HTML 

  
 MESSAGE 1 
 
 MESSAGE 2

JS 

 //Note you do not need to make an anonymous //function just to do the call for checkY //just pass the function $(window).scroll(checkY); function checkY(){ //save this value so we dont have to call the function everytime var top = $(window).scrollTop(); console.log(top); $(".foxedDiv").each(function(){ var positionData = $(this).data("position").split(","); if(top > positionData[0] && top <= positionData[1]){ console.log("Show"); $(this).show(); } else { console.log("Hide"); $(this).hide(); } }); } checkY();

JSFiddle Demo

Vos fonctions doivent avoir des noms différents. Essayer 

 var startY1 = 900; var stopY1 = 1800; var startY2 = 1801; var stopY2 = 2500; $(window).scroll(function(){ checkY(); }); function checkY() { console.log($(window).scrollTop()); if($(window).scrollTop() > startY1 && $(window).scrollTop() <= stopY1) { console.log("Show"); $('.foxedDiv').show(); } else { console.log("Hide"); $('.foxedDiv').hide(); } if($(window).scrollTop() > startY2 && $(window).scrollTop() <= stopY2) { console.log("Show"); $('.foxedDivved').show(); } else { console.log("Hide"); $('.foxedDivved').hide(); } } checkY();

Violon fixe:

http://jsfiddle.net/k8bnd/1/