jQueryを使用して要素の絶対位置を見つけるにはどうすればよいですか?


398

jQueryを使用して、要素の絶対位置、つまりウィンドウの開始位置に対する相対位置を見つける方法はありますか?

回答:


650

.offset() 要素のオフセット位置を単純なオブジェクトとして返します。例:

var position = $(element).offset(); // position = { left: 42, top: 567 }

この戻り値を使用して、他の要素を同じ場所に配置できます。

$(anotherElement).css(position)

90
私はいつもこれを忘れて、
ググる

16
これは、常に原因国境の違いなどに絶対位置を返していないようだ
トム・

8
私はクロムを使用しておりoffset()、適切な上部座標を返しません。代わりに、ドキュメント内の要素の上部座標より約300ピクセル多く返します。なぜ??
SoLoGHoST

1
chrome、FF、IEは異なる結果を出します:(
Rizwan Mumtaz 2013

3
@Aren私はいつもこれを忘れて、いつもあなたのコメントが面白いと思います:)
Alex

197

$(element).offset()あなたの要素の位置告げる文書に対して。これはほとんどの状況で問題なく機能しposition:fixedますが、予期しない結果が生じる可能性があります。

あなたの文書が ビューポートよりも長く、ドキュメントの下部に向かって垂直にスクロールした場合、position:fixed要素のoffset()、スクロールした分だけ期待値ます。

position:fixed要素上のドキュメントではなく、ビューポート(ウィンドウ)に関連する値を探しているscrollTop()場合は、fixed要素のoffset().top値からドキュメントの値を減算できます。例:$("#el").offset().top - $(document).scrollTop()

position:fixed要素のオフセット親がdocumentの場合は、parseInt($.css('top'))代わりに読み取る必要があります。


8
まさにこれを探していました!私のような$(document).scrollTop()
初心者の

3
驚くばかり!これが一番の答えになるはずです!
Shivanshu Goyal
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.