jquery 位置
jQueryで位置制御
結構スクロールしたら追従させるメニューとかスクロールがここまできたら表示させるとかありますよね?
その制御に重要な関数を紹介!
要素のドキュメント上での表示位置
- offset()
最初の要素の、ドキュメント上での表示位置を返します。
戻り値のオブジェクトはtopとleftの2つの数値を持ちます。この関数は、可視状態にある要素に対してのみ有効です。
$("h1").offset().top // 要素の頭位置 $("h1").offset().left // 要素の左側の位置
要素のスクロール位置
- scrollTop()
最初の要素の現在のスクロール上の上位置を取得します。
この関数は、要素の表示/非表示状態にかかわらず機能します。
$('div').scroll(function(){ console.log($(this).scrollTop()); // スクロールで値が変わる!! });
この二つを比較することでスクロール位置によって要素の操作が可能になりますね。