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

Comment déterminer la distance entre le haut d'un div et le haut de l'écran actuel? Je veux juste la distance en pixels du haut de l'écran actuel, pas du haut du document. J'ai essayé quelques trucs comme .offset()et .offsetHeight, mais je ne peux tout simplement pas m'envelopper dans mon cerveau. Merci!

Vous pouvez utiliser .offset()pour obtenir le décalage par rapport à l' documentélément, puis utiliser la scrollToppropriété de l' windowélément pour trouver à quelle distance de la page l'utilisateur a fait défiler:

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

La distancevariable contient maintenant la distance entre le haut de l' #my-elementélément et le pli supérieur.

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

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

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.

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

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

Mais je vais quand même écrire une réponse car tout comme moi, les gens oublient parfois de lire les commentaires.

Donc, si vous voulez juste obtenir la distance d'un élément (en pixels) du haut de votre fenêtre d'écran, voici ce que vous devez faire:

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

utilisez getBoundingClientRect ()

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

C'est tout!

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

J'ai utilisé ceci:

                              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);
    });
    */

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

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');
}
});