Get dolny i prawy pozycji elementu

Question

staram się uzyskać pozycję elementu w oknie tak:

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; 

Jednak dolny i prawy mają - przed nimi ... Dlaczego czy to jest? ponieważ liczby są poprawne, po prostu NIE powinny być minus.

Answer 1

Zamiast

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

Dlaczego nie robisz

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

Edycja: Twój błędem jest to, że robisz

bottom = offset.top - bottom; 

zamiast

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

Answer 2

Można użyć .position() tego

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

myślę

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

Rezultatem są

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

w przeglądarce Chrome z kopalni.

Gdy dokument jest przewijany, $(window).height() zwraca wysokość okienka przeglądarki, a nie szerokość dokumentu, z którego niektóre części są przewijane. Zobacz 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'); 

ten znajdzie odległość od górnej i lewej rzutni do swojej dokładnym krawędzi elemencie i nic poza tym. Załóżmy, że Twoje logo ma 350px i ma lewy margines 50px, zmienna "right" będzie miała wartość 400, ponieważ jest to rzeczywista odległość w pikselach potrzebna do dotarcia do krawędzi twojego elementu, bez względu na to, czy masz więcej paddingu lub margines po prawej stronie.

Jeśli twoja właściwość CSS w pudełku jest ustawiona na border-box, będzie działała tak, jakby była ustawiona jako domyślna zawartość.