web-dev-qa-db-ja.com

jQueryを使用してスクロールした後、要素の新しいx / y位置を取得する

次のような_<a>_タグがあるとします。

_<body>
    <div class="wrapper">
        <a href="#" class="a1">Click Me</a>
    </div>
</body>
_

そして私のCSSは:

_body{ padding:10px;}
.wrapper { height:1000px; width:500px;}
_

現在、Jqueryの.offset()を使用して、_<a>_タグのX/Y位置を取得しています。

_var offset = $(".a1").offset();
var top = offset.top;
var left = offset.left;
_

ページをスクロールして_<a>_タグのx、y座標を確認すると、それらは同じままです。つまり、ページのスクロールは無効です。
画面に関連するページをスクロールした後、_<a>_タグの新しいX、Y位置を取得したい。
この_<a>_タグが下にスクロールした後に非表示になる場合、その位置を負の値に設定します。

このフィドルを確認してください: http://jsfiddle.net/xQh5J/9/

助けてください。

12
Prasad Jadhav

リンク要素の位置w.r.t。ドキュメントは、スクロールしても変更されません。要素w.r.tの位置を取得します。 ウィンドウの左上、offset()とあなたが得るもののウィンドウのscrollTopフォームを引きます:

var offset = $(".a1").offset();
var w = $(window);
alert("(x,y): ("+(offset.left-w.scrollLeft())+","+(offset.top-w.scrollTop())+")");

デモ: http://jsfiddle.net/xQh5J/10/

24
techfoobar