Vérifiez la position DIV par rapport à l'écran du navigateur - jQuery

Question

J'ai plusieurs DIV avec le même nom de classe, laissez sauvegarder "wmplayer". Je veux m'assurer que lorsque ces DIV se rapprocheront du bas du navigateur, disons 100px au dessus du bas, ils auront l'affichage: aucun. Comment je fais ça avec jQuery? Merci

Answer 1

Je ne comprends pas exactement ce que vous voulez, mais je belive le code suivant fera l'affaire, ou vous pouvez adapter à votre scénario spécifique. Il lie un événement de redimensionnement sur l'objet DOM de la fenêtre, chaque fois que l'écran le redimensionne, déclenche un événement personnalisé sur toutes les divs de cette classe. L'événement vérifie innserWidth/Height de l'écran du navigateur, avec ces valeurs, il fait des calculs avec la taille div et la position pour atteindre l'objectif. Ce code vérifie à la fois près du bas et près du côté droit de l'écran. Si vous ne souhaitez pas vérifier le côté droit, supprimez le second IF.

var Constant= 100; //100 px 
$(document).ready(function() { 
    $(window).resize(function() { 
     var x= $(window).attr("innerWidth"); 
     var y= $(window).attr("innerHeight"); 
     $("div.wmplayer").trigger("DisplayNoneEvent", [x,y]); 
    }); 

    $("div.wmplayer").bind("DisplayNoneEvent", function(x, y) { 
     var top, left, divwidth, divheight; 
     top= this.css("top"); 
     left= this.css("left"); 
     divwidth= parseInt(this.css("width")); 
     if (top + divwidth > x + Constant) { 
      $("div.wmplayer").css({ 
       "display": "none" 
      }); 
     } else { 
      divheight= parseInt(this.css("height")); 
      if (left + divheight > y + Constant) { 
       this.css({ 
        "display": "none" 
       }); 
      } 
      else { 
       this.css({ 
        "display": "block" 
       }); 
      } 
     } 
    }) 
    $(window).trigger("resize"); 
    /* the previous line might not be necessary, I'm not sure. It triggers 
    the event once on pageload */ 
}); 

Cela ne fonctionne que sur divs avec position absolue, si vous souhaitez utiliser avec divs avec position relative dont vous avez besoin pour obtenir la position de la div par rapport à la fenêtre, ne savez pas comment le faire. Je ne peux penser à une fonction récursive pour vérifier tous les parents en ajoutant toutes les largeurs/hauteurs jusqu'à ce qu'il atteigne l'objet document. C'est trop moche, lent et sensible aux codes. Peut-être que quelqu'un a une meilleure idée sur la façon de le faire.

Remarque: la fonction parseint ne fonctionne pas très bien sur IE6 et IE7 (je ne sais pas sur IE8), vous devez d'abord supprimer manuellement la chaîne 'px' de la fin de la chaîne retournée par this.css ("largeur ").

Answer 2

Vous pouvez utiliser position(). Il récupère la position en haut à gauche de l'élément par rapport à son parent. Quant à la façon de garder le contrôle pour cela, vous pouvez utiliser scroll() qui est déclenché chaque fois une barre de défilement est déclenchée (mais ne tient pas la mise à jour pendant le défilement IIRC), juste lier défiler à votre fenêtre de document ala $(window).scroll(function() { ... });

Answer 3

vous pouvez utiliser css

par exemple

CSS 

.nodisplay{ 
display:none; 
} 

<div class="wmplayer nodisplay" ></div>