web-dev-qa-db-ja.com

javascript / jQueryのスクロールで要素のオフセットを検出する

要素とドキュメントウィンドウの上部との間の距離を計算しようとしています。スクロールすると、初期値を取得できますが、変更されません。この値を見つけるにはどうすればいいですか？

JS：

$(function() {
    $(window).scroll(function() {
        var h1 = $("h1");
        console.log(h1.offset().top)
    });
});

HTML：

<div id="cover">   
    <h1>hello sir</h1> 
</div>
javascriptjqueryhtmloffset
21
jeffreynolte

_<h1>_要素のオフセットと、ユーザーがスクロールしたページの距離を比較します。 $(window).scrollTop()関数は、ユーザーが下にスクロールした量を取得します。

_$(window).scroll(function() {
  var $h1 = $("h1");
  var window_offset = $h1.offset().top - $(window).scrollTop();
});
_
31
MidnightLightning

算術演算（および追加の関数呼び出し）が嫌いなら、これでうまくいくはずです：

$(function() {
    var h1 = document.getElementsByTagName("h1")[0];
    $(window).scroll(function() {
        console.log(h1.getBoundingClientRect().top);
    });
});

これがまさに getBoundingClientRect（） の目的です。

7
Noyo

この関数を使用して、ウィンドウのスクロールオフセットを取得できます。

function getScrollXY() {
  var scrOfX = 0, scrOfY = 0;
  if( typeof( window.pageYOffset ) == 'number' ) {
    //Netscape compliant
    scrOfY = window.pageYOffset;
    scrOfX = window.pageXOffset;
  } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
    //DOM compliant
    scrOfY = document.body.scrollTop;
    scrOfX = document.body.scrollLeft;
  } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
    //IE6 standards compliant mode
    scrOfY = document.documentElement.scrollTop;
    scrOfX = document.documentElement.scrollLeft;
  }
  return [ scrOfX, scrOfY ];
}

次に、関数のオフセットを使用して、要素の実際の位置を決定できます。

$(function() {
    $(window).scroll(function() {
        var h1 = $("h1");
        var offs = getScrollXY();
        console.log(h1.offset().top - offs[1]);
    });
});

理論的には、これはすべてのブラウザーで機能するはずですが、率直に言って、私はあまりテストしませんでした。

3
Aleks G