jquery 位置

javascript jquery

jQueryで位置制御

結構スクロールしたら追従させるメニューとかスクロールがここまできたら表示させるとかありますよね？

その制御に重要な関数を紹介！

要素のドキュメント上での表示位置

  • offset()

    最初の要素の、ドキュメント上での表示位置を返します。

    戻り値のオブジェクトはtopとleftの2つの数値を持ちます。この関数は、可視状態にある要素に対してのみ有効です。

$("h1").offset().top   // 要素の頭位置
$("h1").offset().left　// 要素の左側の位置

要素のスクロール位置

  • scrollTop()

    最初の要素の現在のスクロール上の上位置を取得します。

    この関数は、要素の表示/非表示状態にかかわらず機能します。

$('div').scroll(function(){
  console.log($(this).scrollTop()); // スクロールで値が変わる！！
});

この二つを比較することでスクロール位置によって要素の操作が可能になりますね。