jqueryを使って要素の位置を取得する時は、offset()関数を使います。
セレクタ.offset()
要素の左上を頂点位置として、x座標とy座標は次のように取りだす事ができます。
セレクタ.offset().left、セレクタ.offset().top
(セレクタが複数の要素の場合、先頭の要素の位置を返します)
offset()で要素の位置の取得はできますが、要素の位置の変更はできません。位置の変更をしたい時は、css()関数を使ってleft,topプロパティを変更します。
セレクタ.css("left",変更先のx座標)、セレクタ.css("top",変更先のy座標)
この時、positionプロパティがabsoluteもしくはstaticである必要があります。
画面サイズ（ブラウザのウインドウサイズ）は次のようにして取得する事ができます。
ウインドウ幅：$(window).width()
ウインドウの高さ：$(window).height()
(ブラウザによって、ウインドウサイズの捉え方が異なり、スクロールバーの幅や高さが含まれる場合があるので注意です)
スクロール量は次のようにして取得する事が出来ます。
縦方向のスクロール量：$(windows).scrollTop()
横方向のスクロール量：$(windows).scrollLeft()
上の例は$(window)ですが、overflowがscrollかautoの他の要素に対しても、scrollTop,scrollLeftは使えます。
スクロールイベントは次のように書けます。
セレクタ.scroll(スクロールされた時に処理される関数);
セレクタ.scroll(function(){
});
参考書籍
セレクタ.offset()
要素の左上を頂点位置として、x座標とy座標は次のように取りだす事ができます。
セレクタ.offset().left、セレクタ.offset().top
(セレクタが複数の要素の場合、先頭の要素の位置を返します)
offset()で要素の位置の取得はできますが、要素の位置の変更はできません。位置の変更をしたい時は、css()関数を使ってleft,topプロパティを変更します。
セレクタ.css("left",変更先のx座標)、セレクタ.css("top",変更先のy座標)
この時、positionプロパティがabsoluteもしくはstaticである必要があります。
画面サイズ（ブラウザのウインドウサイズ）は次のようにして取得する事ができます。
ウインドウ幅：$(window).width()
ウインドウの高さ：$(window).height()
(ブラウザによって、ウインドウサイズの捉え方が異なり、スクロールバーの幅や高さが含まれる場合があるので注意です)
スクロール量は次のようにして取得する事が出来ます。
縦方向のスクロール量：$(windows).scrollTop()
横方向のスクロール量：$(windows).scrollLeft()
上の例は$(window)ですが、overflowがscrollかautoの他の要素に対しても、scrollTop,scrollLeftは使えます。
スクロールイベントは次のように書けます。
セレクタ.scroll(スクロールされた時に処理される関数);
セレクタ.scroll(function(){
});
参考書籍
- つくって覚えるjQuery入門/アスキー・メディアワークス
- ￥1,890
- Amazon.co.jp
- Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)/アスキー・メディアワークス
- ￥3,497
- Amazon.co.jp