Tentukan jarak dari atas div ke atas jendela dengan javascript

Bagaimana cara menentukan jarak antara bagian paling atas dari div ke bagian atas layar saat ini? Saya hanya ingin jarak piksel ke atas layar saat ini, bukan bagian atas dokumen. Saya sudah mencoba beberapa hal seperti .offset()dan .offsetHeight, tetapi saya tidak bisa membungkus otak saya dengannya. Terima kasih!

Anda dapat menggunakan .offset()untuk mendapatkan offset dibandingkan dengan documentelemen dan kemudian menggunakan scrollTopproperti windowelemen untuk menemukan seberapa jauh ke bawah halaman yang telah digulir pengguna:

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

The distancevariabel sekarang memegang jarak dari puncak #my-elementelemen dan bagian atas kali lipat.

Berikut ini adalah demo: http://jsfiddle.net/Rxs2m/

Perhatikan bahwa nilai negatif berarti elemen berada di atas lipatan atas.

Vanila:

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

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

   console.log(distanceToTop);
});

Buka konsol browser Anda dan gulir halaman Anda untuk melihat jaraknya.

Ini dapat dicapai murni dengan JavaScript .

Saya melihat jawaban yang ingin saya tulis telah dijawab oleh lynx dalam komentar untuk pertanyaan itu.

Tetapi saya tetap akan menulis jawaban karena sama seperti saya, orang kadang-kadang lupa membaca komentar.

Jadi, jika Anda hanya ingin mendapatkan jarak elemen (dalam Piksel) dari bagian atas jendela layar Anda, inilah yang perlu Anda lakukan:

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

gunakan getBoundingClientRect ()

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

Itu dia!

Semoga ini bisa membantu seseorang :)

Saya menggunakan ini:

                              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

kode:

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

Saya menggunakan fungsi ini untuk mendeteksi jika elemen terlihat di port tampilan

Kode:

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