Obtener la posición inferior y derecho de un elemento

Question

Estoy tratando de obtener la posición de un elemento dentro de la ventana de esta manera:

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; 

Sin embargo la parte inferior y derecha tienen - delante de ellos ... ¿Por qué ¿Es esto? como los números son correctos solo NO deberían ser menos.

Answer 1

En lugar de

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

¿Por qué no haces

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

Editar: Tu error es que se está haciendo

bottom = offset.top - bottom; 

en lugar de

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

Answer 2

se puede utilizar el .position() para este

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(); 

Answer 3

Creo

<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> 

El resultado son

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

en el navegador Chrome de la mía.

Cuando el documento es desplazable, $(window).height() devuelve la altura de la ventana gráfica del navegador, no el ancho del documento del cual algunas partes se ocultan en desplazamiento. Ver http://api.jquery.com/height/.

Answer 4

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();

Answer 5

// 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'); 

Esto encontrará la distancia desde la parte superior e izquierda de la ventana hasta el borde exacto de su elemento y nada más allá de eso. Así que supongamos que su logotipo es 350px y tiene un margen izquierdo de 50px, la variable 'derecha' tendrá un valor de 400 porque esa es la distancia real en píxeles que le llevó llegar al borde de su elemento, sin importar si tiene más relleno o margen a la derecha de ella.

Si su propiedad CSS de tamaño de caja está establecida en border-box, continuará funcionando igual que si estuviera configurado como el cuadro de contenido predeterminado.