Javascript ile bir div'in üstünden pencerenin üstüne kadar olan mesafeyi belirleyin

Bir div'in en üstünden geçerli ekranın en üstüne kadar olan mesafeyi nasıl belirleyebilirim? Ben sadece piksel mesafesinin geçerli ekranın üst kısmına kadar olmasını istiyorum, belgenin üstüne değil. Ben gibi bir kaç şey denedim .offset()ve .offsetHeight, ama sadece onun etrafında beynimi sarmalayamazsınız. Teşekkürler!

Sen kullanabilirsiniz .offset()almak için karşılaştırıldığında ofset documenteleman ve sonra kullanmak scrollTopözelliği windowkullanıcı kaydırılan ne kadar ileri Sayfanın altındaki bulmak için eleman:

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

distanceDeğişken hemen üstüne olan mesafeyi tutan #my-elementeleman ve üst kat.

İşte bir demo: http://jsfiddle.net/Rxs2m/

Negatif değerlerin, öğenin üst katın üstünde olduğu anlamına geldiğini unutmayın.

Vanilya:

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

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

   console.log(distanceToTop);
});

Tarayıcı konsolunuzu açın ve mesafeyi görmek için sayfanızı kaydırın.

Bu tamamen JavaScript ile gerçekleştirilebilir .

Soruya yapılan yorumlarda yazmak istediğim cevabın vaşak tarafından cevaplandığını görüyorum .

Ama yine de cevap yazacağım çünkü tıpkı benim gibi insanlar bazen yorumları okumayı unutuyor.

Öyleyse, ekran pencerenizin üst kısmından bir öğenin mesafesini (Piksel cinsinden) öğrenmek istiyorsanız, yapmanız gerekenler:

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

getBoundingClientRect () kullanın

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

Bu kadar!

Umarım bu birine yardımcı olur :)

Bunu kullandım:

                              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

kod:

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

Öğenin görünüm bağlantı noktasında görünür olup olmadığını tespit etmek için bu işlevi kullandım

Kod:

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