Obtener la posición inferior y derecha de un elemento

Estoy tratando de obtener la posición de un elemento dentro de la ventana así:

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 la derecha tienen -frente a ellos ... ¿Por qué es esto? como los números son correctos, NO deben ser menos.

En vez de

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

Porque no estas haciendo

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

Editar: tu error es que estás haciendo

bottom = offset.top - bottom;

en vez de

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

var link = $ (elemento);
var offset = link.offset ();

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

var bottom = top + link.outerHeight ();
var derecha = izquierda + link.outerWidth ();

// 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 su ventana gráfica hasta el borde exacto de su elemento y nada más allá de eso. Entonces, digamos que su logotipo era de 350 px y tenía un margen izquierdo de 50 px, la variable 'derecha' tendrá un valor de 400 porque esa es la distancia real en píxeles que se necesitó para llegar al borde de su elemento, sin importar si tiene más relleno o margen a la derecha del mismo.

Si su propiedad CSS de tamaño de caja está configurada en border-box, seguirá funcionando como si estuviera configurada como la caja de contenido predeterminada.

Puede utilizar .position () para esto

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

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

El resultado son

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

en el navegador Chrome mío.

Cuando el documento se puede desplazar, $(window).height()devuelve la altura de la ventana del navegador, no el ancho del documento del cual algunas partes están ocultas en el desplazamiento. Consulte http://api.jquery.com/height/ .

Aquí hay una función jquery que devuelve un objeto de cualquier clase o id en la página

var elementPosition = function(idClass) {
            var element = $(idClass);
            var offset = element.offset();

            return {
                'top': offset.top,
                'right': offset.left + element.outerWidth(),
                'bottom': offset.top + element.outerHeight(),
                'left': offset.left,
            };
        };


        console.log(elementPosition('#my-class-or-id'));

Respuesta de Javascript de vainilla

var c = document.getElementById("myElement").getBoundingClientRect();
var bot = c.bottom;
var rgt = c.right;

Para que quede claro, el elemento puede ser cualquier cosa siempre que le haya asignado una identificación, <img> <div> <p>etc.

por ejemplo

<img
    id='myElement'
    src='/img/logout.png'
    className='logoutImg img-button'
    alt='Logout'
/>