Déterminer la distance à partir du haut d'une div en haut de la fenêtre avec javascript

Comment puis-je déterminer la distance entre le sommet d'une div en haut de l'écran actuel? Je veux juste la distance en pixel vers le haut de l'écran en cours, pas le haut du document. J'ai essayé quelques petites choses comme .offset() et .offsetHeight, mais j'ai juste ne peut pas envelopper mon cerveau autour d'elle. Merci!

  • vous pourriez voulez regardez
  • el.getBoundingClientRect().top+window.scrollY
  • Hein, c'est juste el.getBoundingClientRect().top. L'ajout de la position de défilement s'ajoute à la distance vers le haut du document. developer.mozilla.org/de/docs/Web/API/Element/...
  • oui à droite, je voulais juste unjquerify
InformationsquelleAutor Joel Eckroth | 2012-03-26
  1. 223

    Vous pouvez utiliser .offset() pour obtenir le décalage par rapport à la document élément et ensuite utiliser le scrollTop propriété de la window élément à trouver comment loin en bas de la page que l'utilisateur ait défilé:

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

    La distance variable détient maintenant la distance entre le haut de la #my-element élément et le haut-pli.

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

    Noter que les valeurs négatives signifient que l'élément est au-dessus du haut-pli.

    InformationsquelleAutor Jasper
  2. 47

    Vanille:

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

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

   console.log(distanceToTop);
});

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

    • Cela ne fonctionne que si l'utilisateur n'a pas fait défiler la page. Sinon distanceToTop retourné est relatif (peut même être négatif si l'utilisateur est déjà passé). Pour prendre cela en compte, l'utilisation window.pageYOffset + someDiv.getBoundingClientRect().top
    • La COOP est à la recherche de la distance vers le haut de l'écran, pas vers le haut du document - une valeur négative serait valable dans ce cas
    InformationsquelleAutor horahore
  3. 8

    Ceci peut être réalisé purement JavaScript.

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

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

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

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

    utilisation getBoundingClientRect() 

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

    C'est tout!

    Espère que cela aide quelqu'un 🙂

    • getBoundingClient() ne fonctionne pas, à la place .getBoundingClientRect()
    • Merci pour la suggestion 🙂 j'ai fait les modifications appropriées.
    • Tout simplement génial de travail @MohammedFurqanRahamathM. Merci beaucoup pour votre réponse 🙂 Il fonctionne comme un charme !! 🙂
    • Je vous remercie. Je suis content qu'il était de l'aide 🙂
    InformationsquelleAutor Mohammed Furqan Rahamath M
  4. 5

    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);
    });
    */
    InformationsquelleAutor T.Todua