私はそうのようなウィンドウ内の要素の位置を取得しようとしている要素

Question

の下と右の位置を取得します。これは？数字は正しいので、マイナスにしてはいけません。なぜあなたは

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

編集をしていない

Answer 1

代わりの

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

：あなたの間違いは、あなたが

bottom = offset.top - bottom; 

代わり

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

のやっているということです

Answer 2

あなたは、私が思うに、この

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

ため.position()を使用することができます

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

結果は私のChromeブラウザで

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

です。

ドキュメントがスクロール可能な場合、$(window).height()は、スクロールで一部の部品が隠れているドキュメントの幅ではなく、ブラウザのビューポートの高さを返します。 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'); 

これは、トップからの距離を見つけて、それを越えあなたの要素の正確なエッジと何もあなたのビューポートの左側ます。あなたのロゴが350pxで、左端に50px、変数 'right'が400という値を保持しているとしましょう。これは、実際の距離をピクセル単位で表したものです。またはその右側のマージン。

ボックスサイズのCSSプロパティがborder-boxに設定されている場合、デフォルトのコンテンツボックスとして設定されているかのように動作します。