要素の垂直位置の取得方法（JQuery↔︎Vanilla JS）

JQueryをVanilla JS(素のJavaScript)に書き換えている際、「あれ要素位置どうやって取得してたっけ...？」となったのでメモ。いい加減覚えたい。

vanilla JS

絶対位置

• window.pageYOffset はページの垂直スクロール位置を返す
• element.getBoundingClientRect().top は要素のビューポートからの垂直位置を返す

window.pageYOffset + element.getBoundingClientRect().top

ビューポートからの相対位置

element.getBoundingClientRect().top

JQuery

絶対位置

• element.offset() はドキュメントの左上隅からの絶対位置を返す
• .top プロパティを使って垂直位置を取得

element.offset().top

ビューポートからの相対位置

• $(window).scrollTop() は現在の垂直スクロール位置を返す

element.offset().top - $(window).scrollTop()

イメージ

補足

window.pageYOffset;　は古いブラウザ（IE9以下）ではサポートされていないため、以下のように記述することもある。

let scrollTop = window.pageYOffset || document.documentElement.scrollTop;