Obtenez bas et à droite position d'un élément


66

J'essaie d'obtenir la position d'un élément dans la fenêtre comme ceci:

var link = $(element); 

var offset = link.offset(); 
var top = offset.top; 
var left = offset.left; 
var bottom = $(window).height() - link.height(); 
bottom = offset.top - bottom; 
var right = $(window).width() - link.width(); 
right = offset.left - right; 

Cependant le fond et à droite ont - devant eux ... Pourquoi est-ce? comme les chiffres sont corrects, ils ne devraient pas être négatifs.

78

Au lieu de

var bottom = $(window).height() - link.height(); 
bottom = offset.top - bottom; 

Pourquoi ne faites-vous

var bottom = $(window).height() - top - link.height(); 

Edit: Votre erreur est que vous faites

bottom = offset.top - bottom; 

au lieu de

bottom = bottom - offset.top; // or bottom -= offset.top; 

1

Vous pouvez utiliser le .position() pour cette

var link = $(element); 
var position = link.position(); //cache the position 
var right = $(window).width() - position.left - link.width(); 
var bottom = $(window).height() - position.top - link.height(); 
+4

Dans jQuery doc, il n'y a pas de référence à l'attribut "right" dans l'objet de résultat pour position(). [Doc ici] (http://api.jquery.com/position/) 26 mars. 122012-03-26 12:41:59

  0

@Mordhak, La mise à jour devrait fonctionner. 26 mars. 122012-03-26 12:45:22

+4

Oui, mais il doit être décalé au lieu de la position, le décalage est supérieur/gauche selon le document, la position se réfère au parent. 26 mars. 122012-03-26 12:52:39

  0

@Mordhak, Oui, mais comme vous pouvez le voir, j'utilise 'windows.width()' et similaires pour d'autres calculs. 12 sept.. 122012-09-12 07:24:44

+2

'position.right' n'existe toujours pas dans ce contexte. 24 janv.. 142014-01-24 15:30:24


0

Je pense que

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 

<div>Testing</div> 
<div id="result" style="margin:1em 4em; background:rgb(200,200,255); height:500px"></div> 
<div style="background:rgb(200,255,200); height:3000px; width:5000px;"></div> 

<script> 
(function(){ 
    var link=$("#result"); 

    var top = link.offset().top; // position from $(document).offset().top 
    var bottom = top + link.height(); // position from $(document).offset().top 

    var left = link.offset().left; // position from $(document).offset().left 
    var right = left + link.width(); // position from $(document).offset().left 

    var bottomFromBottom = $(document).height() - bottom; 
    // distance from document's bottom 
    var rightFromRight = $(document).width() - right; 
    // distance from document's right 

    var str=""; 
    str+="top: "+top+"<br>"; 
    str+="bottom: "+bottom+"<br>"; 
    str+="left: "+left+"<br>"; 
    str+="right: "+right+"<br>"; 
    str+="bottomFromBottom: "+bottomFromBottom+"<br>"; 
    str+="rightFromRight: "+rightFromRight+"<br>"; 
    link.html(str); 
})(); 
</script> 

Le résultat est

top: 44 
bottom: 544 
left: 72 
right: 1277 
bottomFromBottom: 3068 
rightFromRight: 3731 

dans le navigateur chrome de la mine. Lorsque le document est défilable, $(window).height() renvoie la hauteur de la fenêtre du navigateur, et non la largeur du document dont certaines parties sont masquées. Voir http://api.jquery.com/height/.


28
var link = $(element); 
var offset = link.offset(); 

var top = offset.top; 
var left = offset.left; 

var bottom = top + link.outerHeight(); 
var right = left + link.outerWidth();

4
// Returns bottom offset value + or - from viewport top 
function offsetBottom(el, i) { i = i || 0; return $(el)[i].getBoundingClientRect().bottom } 

// Returns right offset value 
function offsetRight(el, i) { i = i || 0; return $(el)[i].getBoundingClientRect().right } 

var bottom = offsetBottom('#logo'); 
var right = offsetRight('#logo'); 

Ce trouvera la distance entre le haut et à gauche de votre fenêtre à bord exact et rien de votre élément au-delà. Donc, disons que votre logo était de 350px et qu'il y avait une marge gauche de 50px, la variable 'right' contiendra une valeur de 400 parce que c'est la distance réelle en pixels qu'il faut pour arriver au bord de votre élément, peu importe si vous avez plus de rembourrage ou marge à la droite de celui-ci.

Si votre propriété CSS de dimensionnement est définie sur border-box, elle continuera à fonctionner comme si elle était définie comme zone de contenu par défaut.

  0

Meilleure réponse pour moi! 23 juin. 162016-06-23 15:34:49