JavaScriptで色々な高さ・距離の表現
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// スクロール量 window.scrollY; // 旧window.pageYOffset // windowの高さ window.innerHeight; // ウィンドウ底辺のY座標(windowの下辺のY座標) const scrollAmount = window.scrollY; const windowHeight = window.innerHeight; const showPos = scrollAmount + windowHeight; // 要素の高さ document.querySelector('header').offsetHeight; // windowの上辺から要素の上辺までの距離 document.querySelector('header').getBoundingClientRect().top; |
jQueryで同じこと
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// スクロール量 $(window).scrollTop(); // windowの高さ $(window).height(); // ウィンドウ底辺のY座標(windowの下辺のY座標) const scrollAmount = $(window).scrollTop(); const windowHeight = $(window).height(); const showPos = scrollAmount + windowHeight; // 要素の高さ $('header').height(); // 要素のY座標 $('header').offset().top; // windowの上辺から要素の上辺までの距離 |
| JavaScript | jQuery | |
|---|---|---|
| スクロール量 | window.scrollY | $(window).scrollTop() |
| windowの高さ | window.innerHeight | $(window).height() |
| ウィンドウ底辺のY座標 | window.scrollY + window.innerHeight | $(window).scrollTop() + $(window).height() |
| 要素の高さ | document.querySelector(‘header’).offsetHeight | $(‘header’).height() |
| windowの上辺から要素の上辺までの距離 | document.querySelector(‘header’).getBoundingClientRect().top | – |
| Document上辺から測った要素のY座標 | – | $(‘header’).offset().top |
コメント
コメントはありません。