web-dev-qa-db-fra.com

Détection du décalage d'un élément lors du défilement dans javascript / jQuery

Je cherche à calculer la distance entre un élément et le haut de la fenêtre du document. Sur le défilement, je peux obtenir la valeur initiale, mais elle ne change pas. Comment puis-je trouver cette valeur et à quoi le nombre a changé sur le défilement?

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

Comparez le décalage de l'élément <h1> À la distance parcourue par l'utilisateur. La fonction $(window).scrollTop() vous obtiendra le montant que l'utilisateur a fait défiler vers le bas afin:

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

Si vous détestez l'arithmétique (et les appels de fonctions supplémentaires), cela devrait faire l'affaire:

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

C'est exactement pour cela que getBoundingClientRect () a été conçu.

7
Noyo

Vous pouvez utiliser cette fonction pour obtenir le décalage de défilement de la fenêtre:

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 ];
}

Ensuite, vous pouvez utiliser les décalages dans votre fonction pour déterminer la position réelle de votre élément:

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

Théoriquement, cela devrait fonctionner dans tous les navigateurs, mais, franchement, je n'ai pas fait trop de tests.

3
Aleks G