Déterminer la distance entre le haut d'un div et le haut de la fenêtre avec javascript

Question

Comment déterminer la distance entre le haut d'une division et le haut de l'écran actuel ? Je veux simplement connaître la distance en pixels entre le haut de l'écran actuel et le haut du document. J'ai essayé plusieurs choses comme .offset() et .offsetHeight mais je n'arrive pas à me faire à l'idée. Merci.

Answer 1

Vous pouvez utiliser .offset() pour obtenir le décalage par rapport à la document puis utiliser l'élément scrollTop de l window pour savoir jusqu'où l'utilisateur a fait défiler la page :

var scrollTop     = $(window).scrollTop(),
    elementOffset = $('#my-element').offset().top,
    distance      = (elementOffset - scrollTop);

Le site distance contient maintenant la distance entre le sommet de l'arbre et le sommet de l'arbre. #my-element et le pli supérieur.

Voici une démo : http://jsfiddle.net/Rxs2m/

Notez que les valeurs négatives signifient que l'élément se trouve au-dessus du pli supérieur.

Answer 2

Vanille :

window.addEventListener('scroll', function(ev) {

   var someDiv = document.getElementById('someDiv');
   var distanceToTop = someDiv.getBoundingClientRect().top;

   console.log(distanceToTop);
});

Ouvrez la console de votre navigateur et faites défiler votre page pour voir la distance.

Answer 3

Cela peut être réalisé purement avec JavaScript .

Je vois que la réponse que je voulais écrire a été répondue par lynx dans les commentaires de la question.

Mais je vais quand même répondre parce que, tout comme moi, les gens oublient parfois de lire les commentaires.

Ainsi, si vous souhaitez simplement obtenir la distance (en pixels) d'un élément par rapport au haut de la fenêtre de votre écran, voici ce que vous devez faire :

// Fetch the element
var el = document.getElementById("someElement");  

utiliser getBoundingClientRect()

// Use the 'top' property of 'getBoundingClientRect()' to get the distance from top
var distanceFromTop = el.getBoundingClientRect().top; 

C'est ça !

J'espère que cela aidera quelqu'un :)

Answer 4

J'ai utilisé ça :

                              myElement = document.getElemenById("xyz");
Get_Offset_From_Start       ( myElement );  // returns positions from website's start position
Get_Offset_From_CurrentView ( myElement );  // returns positions from current scrolled view's TOP and LEFT

code :

function Get_Offset_From_Start (object, offset) { 
    offset = offset || {x : 0, y : 0};
    offset.x += object.offsetLeft;       offset.y += object.offsetTop;
    if(object.offsetParent) {
        offset = Get_Offset_From_Start (object.offsetParent, offset);
    }
    return offset;
}

function Get_Offset_From_CurrentView (myElement) {
    if (!myElement) return;
    var offset = Get_Offset_From_Start (myElement);
    var scrolled = GetScrolled (myElement.parentNode);
    var posX = offset.x - scrolled.x;   var posY = offset.y - scrolled.y;
    return {lefttt: posX , toppp: posY };
}
//helper
function GetScrolled (object, scrolled) {
    scrolled = scrolled || {x : 0, y : 0};
    scrolled.x += object.scrollLeft;    scrolled.y += object.scrollTop;
    if (object.tagName.toLowerCase () != "html" && object.parentNode) { scrolled=GetScrolled (object.parentNode, scrolled); }
    return scrolled;
}

    /*
    // live monitoring
    window.addEventListener('scroll', function (evt) {
        var Positionsss =  Get_Offset_From_CurrentView(myElement);  
        console.log(Positionsss);
    });
    */

Answer 5

J'ai utilisé cette fonction pour détecter si l'élément est visible dans le port d'affichage.

Code :

const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
$(window).scroll(function(){
var scrollTop     = $(window).scrollTop(),
elementOffset = $('.for-scroll').offset().top,
distance      = (elementOffset - scrollTop);
if(distance < vh){
    console.log('in view');
}
else{
    console.log('not in view');
}
});