Détection du décalage d'un élément sur le défilement en 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 suis capable d'obtenir la valeur initiale mais cela ne change pas. Comment puis-je trouver cette valeur et ce que 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>
3 réponses
Comparez le décalage de l'élément <h1> à la distance de la page que l'Utilisateur a parcourue. La fonction $(window).scrollTop() vous obtiendra le montant que l'Utilisateur a fait défiler vers le bas ainsi:
$(window).scroll(function() {
var $h1 = $("h1");
var window_offset = $h1.offset().top - $(window).scrollTop();
});
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 ce que getBoundingClientRect() a été fait pour.
Vous pouvez utiliser cette fonction pour obtenir le défilement de décalage 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.