web-dev-qa-db-ja.com

jqueryで固定divの位置を取得します

位置が「固定」のdivがあり、ユーザーがページを下にスクロールしている間、その位置の値を取得したいドキュメント全体に対して。

したがって、divを（x = 0、y = 0）に配置し、ユーザーが少し下にスクロールすると、ドキュメントに対してdivがオン（X = 0、y = 300）になります。その情報を取得したいのですが、ウィンドウやブラウザではなく、ドキュメント全体に対する、あらゆる瞬間におけるそのdivの正確な位置を知りたいのです。

私は多くのことを試みましたが、私がしようとしていることを何も得られないようです。

それらの1つはこのコードです固定divの場合は機能しません：

var position = $("#fixed").offset(); /*it gets the position of the div
                                     "fixed" relative to the document*/
$("#fixed").html(position.top);      /*it prints the obtained
                                     value on the div "fixed"*/

ここで実行中のコードを見つけることができます 、そして下にスクロールすると、divの位置の値が変更されないであることがわかります。

私が間違っていなければ、コードは、ドキュメントに対する垂直位置を変更するたびに、divに新しい値を出力する必要があります。しかし、それは起こらないことが判明しました。

解決済み：

質問は codef0rmer によって解決されました。 スクロールを追跡するために欠落していました固定divの位置の値を更新します。私はばかだった。したがって、最終的なコードは彼が書いた方法でうまく機能します：

$(function () {
    var position = $("#fixed").offset();
    $("#fixed").html(position.top);

    $(window).scroll(function () {
       var position = $("#fixed").offset();
        $("#fixed").html(position.top);
    });
})

そして ここで実行中のコードを見ることができます。

皆さん、特にcodef0rmerに感謝します。

jqueryhtmlpositionfixed
15
m4rk

.offset()を使用してドキュメントを基準にした要素の現在の座標を取得し、.position()を使用してオフセットの親を基準にした要素の現在の座標を取得できます。

14
codef0rmer

。offset（） ドキュメント全体を基準にした座標を示します。

.offset（）メソッドを使用すると、ドキュメントに対する要素の現在の位置を取得できます。これを、オフセットされた親を基準にして現在の位置を取得する.position（）と比較してください。グローバル操作（特にドラッグアンドドロップの実装）のために既存の要素の上に新しい要素を配置する場合は、.offset（）の方が便利です。

.offset（）は、プロパティtopとleftを含むオブジェクトを返します。

注：jQueryは、非表示要素のオフセット座標の取得や、body要素に設定された境界線、マージン、またはパディングの考慮をサポートしていません。

4
j08691

ページを更新し、スクロールバーが初期化された時点で別の位置にある場合を除きます。

0
Barry